<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sweet Candy | Documentation</title>
 
<!-- main JS libs -->
<script src="../sweet-candy-css/js/libs/modernizr.min.js"></script>
<script src="../sweet-candy-css/js/libs/jquery-1.10.0.js"></script>
<script src="../sweet-candy-css/js/libs/jquery-ui.min.js"></script>
<script src="../sweet-candy-css/js/libs/bootstrap.min.js"></script>

<!-- Style CSS -->
<link href="../sweet-candy-css/css/bootstrap.css" media="screen" rel="stylesheet">
<link href="../sweet-candy-css/style.css" media="screen" rel="stylesheet">
<link href="css/docs.css" media="screen" rel="stylesheet">

<!-- scripts -->
<script src="../sweet-candy-css/js/general.js"></script>
<script src="js/general.js"></script>

<!-- datepicker -->
<link href="../sweet-candy-css/css/jquery-ui-1.8.20.custom.css" rel="stylesheet">

<!-- custom input -->
<script src="../sweet-candy-css/js/jquery.customInput.js"></script>
<script type="text/javascript" src="../sweet-candy-css/js/custom.js"></script>

<!-- Placeholders -->
<script type="text/javascript" src="../sweet-candy-css/js/jquery.powerful-placeholder.min.js"></script>

<!-- Multiselect -->
<link rel="stylesheet" href="../sweet-candy-css/css/chosen.css">
<script src="../sweet-candy-css/js/jquery.chosen.min.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('#contact_name').chosen({ width: "100%" });
    });
</script>
    
<!-- Scroll Bars -->
<script src="../sweet-candy-css/js/jquery.mousewheel.js"></script>
<script src="../sweet-candy-css/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style2').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style3').jScrollPane({
            verticalDragMaxHeight: 16,
            verticalDragMinHeight:16
        });

        jQuery('.scrollbar.style4').jScrollPane({
            verticalDragMaxHeight: 43,
            verticalDragMinHeight:43
        });

        jQuery('.scrollbar.style5').jScrollPane({
            verticalDragMaxHeight: 16,
            verticalDragMinHeight:16
        });

        jQuery('.scrollbar.style6').jScrollPane({
            verticalDragMaxHeight: 23,
            verticalDragMinHeight:23
        });
    });
</script>

<!-- Progress Bars -->
<script src="../sweet-candy-css/js/progressbar.js"></script>

<!-- range sliders -->
<script src="../sweet-candy-css/js/jquery.slider.bundle.js"></script>
<script src="../sweet-candy-css/js/jquery.slider.js"></script>
<link rel="stylesheet" href="../sweet-candy-css/css/jslider.css">

<!-- Volume, Balance -->
<script type="text/javascript" src="../sweet-candy-css/js/knobRot-0.2.2.js"></script>

<!-- Video Player -->
<link href="../sweet-candy-css/css/video-js.css" rel="stylesheet">
<script src="../sweet-candy-css/js/video.js"></script>

<!-- Audio Player -->
<link href="../sweet-candy-css/css/jplayer.css" rel="stylesheet">
<script src="../sweet-candy-css/js/jquery.jplayer.min.js"></script>
<script src="../sweet-candy-css/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){
        var $ = jQuery;
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player1.png' /><span><strong>Rihanna -</strong> Only Girl</span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
            },
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player2.png' /><span><strong>Rihanna -</strong> Only</span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
            },
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player3.png' /><span><strong>Rihanna -</strong> Girl</span>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_2",
            cssSelectorAncestor: "#jp_container_2"
        }, [
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player1.png' /><span><strong>Rihanna -</strong> Only Girl</span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
            },
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player2.png' /><span><strong>Rihanna -</strong> Only</span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
            },
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player3.png' /><span><strong>Rihanna -</strong> Girl</span>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_3",
            cssSelectorAncestor: "#jp_container_3"
        }, [
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player1.png' /><span><strong>Rihanna -</strong> Only Girl</span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
            },
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player2.png' /><span><strong>Rihanna -</strong> Only</span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
            },
            {
                title:"<img src='../sweet-candy-css/images/temp/music-player3.png' /><span><strong>Rihanna -</strong> Girl</span>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
</script>

<!-- Calendar -->
<script src="../sweet-candy-css/js/jquery-ui.multidatespicker.js"></script>

<!-- Visual Text Editor -->
<script src="../sweet-candy-css/js/nicEdit.js"></script>

<!-- Graph Builder -->
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../sweet-candy-css/js/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="../sweet-candy-css/js/jquery.flot.js"></script>
<script type="text/javascript" src="../sweet-candy-css/js/jquery.flot.resize.js"></script>
<!-- Graph Style 1 -->
<script type="text/javascript">
    $(function() {
        var d1 = [[0, 9], [1, 23], [1.8, 7], [2.2, 24], [2.8, 18], [4, 36]];
        var graphholder = $("#graph");
        var plot = $.plot(graphholder, [d1], {
            colors: ["#68aec2", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(50,196,245,0.2)"
                },
                points: {
                    show: true,
                    radius: 5,
                    lineWidth: 1,
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                backgroundColor: null,
                color: "#BBB",
                borderColor: "#d3d3d3"
            },
            shadowSize: 0
        });

        function showTooltip(x, y, contents) {
            $("<div id='graph-tooltip' class='graph-tooltip'>" + contents + "</div>").css({top: y - 42, left: x - 20}).appendTo("body").fadeIn(200);
        };

        var previousPoint = null;
        $("#graph").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    $("#graph-tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, '$ ' + y*100);
                }
            } else {
                $("#graph-tooltip").remove();
                previousPoint = null;
            }
        });
    });
</script>
<!-- Graph Style 2 -->
<script type="text/javascript">
    $(function() {
        var d1 = [[0, 9], [1, 18], [1.8, 7], [2.2, 24], [2.8, 17], [4, 36]];
        var graphholder = $("#graph2");
        var plot = $.plot(graphholder, [d1], {
            colors: ["#ffc70a", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(247,176,10,0.2)"
                },
                points: {
                    show: true,
                    radius: 5,
                    lineWidth: 1,
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                backgroundColor: "#fbfbfb",
                color: "#d3ccbd",
                borderColor: "#d3d3d3"
            },
            shadowSize: 0
        });

        function showTooltip(x, y, contents) {
            $("<div id='graph-tooltip2' class='graph-tooltip'>" + contents + "</div>").css({top: y - 45, left: x - 20}).appendTo("body").fadeIn(200);
        };

        var previousPoint = null;
        $("#graph2").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    $("#graph-tooltip2").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, '$ ' + y*100);
                }
            } else {
                $("#graph-tooltip2").remove();
                previousPoint = null;
            }
        });
    });
</script>

<!-- SyntaxHighlighter -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link href="css/prettify.css" rel="stylesheet">

<!--[if lt IE 9]><script src="../sweet-candy-css/js/respond.min.js"></script><![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
    .gradient {filter: none !important;}
</style>
<![endif]-->
</head>

<body>
<div class="body_wrap">

    <header class="header-demo">
        <div class="inner gradient">
            <!-- container -->
            <div class="container container-demo">
                <!-- row -->
                <div class="row">
                    <div class="col-md-3 col-md-3-demo">
                        <div class="logo"><img src="images/logo.png" alt="" /></div>
                    </div>

                    <div class="col-md-9 col-md-9-demo">
                        <h1>Sweet Candy UI Kit</h1>
                        <span>Version: 1.0</span>
                        <span>Last update: 11.11.2013</span>
                    </div>
                </div>
                <!--/ row-->
            </div>
            <!--/ container -->
        </div>
    </header>

    <!-- container -->
    <div class="container container-demo container-demo-main">
        <!-- row -->
        <div class="row">
            <div class="col-md-3 col-md-3-demo">
                <div class="sidebar-demo hidden-print" role="complementary" data-spy="affix" data-offset-top="200">
                    <ul class="nav">
						<li><a href="#about">What is Sweet Candy</a></li>
						<li><a href="#what-included">What is included</a></li>
						<li><a href="#browser">Browser support</a></li>
						<li><a href="#getting-started">Getting Started</a></li>
						<li><a href="#template">Basic Template</a></li>
						<li><a href="#typography">Typography</a></li>
                        <li>
                            <a href="#buttons">Components</a>
                            <ul class="nav">
                                <li>
                                    <a href="#buttons">Buttons</a>
                                    <ul class="nav">
                                        <li><a href="#buttons-simple">Simple Buttons</a></li>
                                        <li><a href="#buttons-rounded">Rounded Buttons</a></li>
                                        <li><a href="#buttons-hovered">Hovered Buttons</a></li>
                                        <li><a href="#buttons-shaped">Shaped Buttons</a></li>
                                        <li><a href="#buttons-special">Buttons with Icons</a></li>
                                        <li><a href="#buttons-input">Buttoned Input</a></li>
                                    </ul>
                                </li>
                                <li><a href="#ribbons">Ribbons</a></li>
                                <li><a href="#badges">Badges</a></li>
                                <li><a href="#rating-stars">Rating Stars</a></li>
                                <li>
                                    <a href="#form">Form Elements</a>
                                    <ul class="nav">
                                        <li><a href="#form-checkboxes">Checkboxes</a></li>
                                        <li><a href="#form-radios">Radio Buttons</a></li>
                                        <li><a href="#form-inputs">Text Inputs</a></li>
                                        <li><a href="#form-textarea">Textareas</a></li>
                                    </ul>
                                </li>
                                <li><a href="#scroll-bars">Scroll Bars</a></li>
                                <li><a href="#progress-bars">Progress bars</a></li>
                                <li><a href="#range-slider">Range Slider</a></li>
                                <li>
                                    <a href="#knobs">Knobs</a>
                                    <ul class="nav">
                                        <li><a href="#knobs-volume">Volume</a></li>
                                        <li><a href="#knobs-balance">Balance</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#navigation">Navigation</a>
                                    <ul class="nav">
                                        <li><a href="#website-menu">Website Menu</a></li>
                                        <li><a href="#dropdown-menu">Dropdown Menu</a></li>
                                    </ul>
                                </li>
                                <li><a href="#tabs">Tabs</a></li>
                                <li><a href="#dividers">Dividers</a></li>
                            </ul>
                        </li>

                        <li>
                            <a href="#forms">Widgets</a>
                            <ul class="nav">
                                <li>
                                    <a href="#forms">Forms</a>
                                    <ul class="nav">
                                        <li><a href="#forms-contact">Contact Form</a></li>
                                        <li><a href="#forms-search">Search Form</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#pricing">Pricing</a>
                                    <ul class="nav">
                                        <li><a href="#pricing-def">Default style</a></li>
                                    </ul>
                                </li>
                                <li><a href="#message-field">Message Field</a></li>
                                <li><a href="#video-player">Video Player</a></li>
                                <li>
                                    <a href="#audio-player">Audio Player</a>
                                    <ul class="nav">
                                        <li><a href="#audio-player-def">Default style</a></li>
                                        <li><a href="#audio-player-alt">Alternative style</a></li>
                                        <li><a href="#audio-player-playlist">Playlist style</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#sliders">Sliders</a>
                                    <ul class="nav">
                                        <li><a href="#sliders-image">Image Slider</a></li>
                                    </ul>
                                </li>
                                <li><a href="#widget-calendar">Calendar</a></li>
                                <li><a href="#user-profile">User Profile</a></li>
                                <li><a href="#flot-graph">Graph</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-md-9 col-md-9-demo">
                <!-- content -->
                <div class="content-demo" role="main">

                    <!-- What is this -->
                    <div class="section-demo">
                        <h2 id="about">What is Sweet Candy UI Kit</h2>

                        <div class="description">
                            <p><a href="http://pixelkit.com/previews/colorful-ui-kit/" target="_blank">Sweet Candy UI Kit</a> is a number of useful user interface components built on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a> framework. We did not modify any line of Bootstrap, but we rewrote some of its grid rules in our <code>style.css</code> to disable responsiveness. <a href="http://pixelkit.com/previews/colorful-ui-kit/" target="_blank">Sweet Candy</a> is not a responsive UI Kit.</p>
                        </div>

                    </div>
                    <!--/ What is this -->

                    <!-- What's included -->
                    <div class="section-demo">
                        <h2 id="what-included">What is included</h2>

                        <div class="description">
                            <p>Once purchased, unzip the compressed folder to see the directory structure of Sweet Candy UI Kit. You'll see something like this:</p>
                        </div>
                        <div class="example">
                            <div class="example-code">
                                    <pre class="prettyprint">
sweet-candy
├───docs
│   ├───css
│   ├───images
│   └───js
├───sweet-candy-css
│   ├───css
│   ├───fonts
│   ├───images
│   │   ├───icons
│   │   ├───prettyPhoto
│   │   └───temp
│   ├───js
│   │   └───libs
│   └───styles
│       ├───blue
│       ├───green
│       └───purple
└───sweet-candy-less
    ├───fonts
    ├───images
    │   ├───icons
    │   ├───prettyPhoto
    │   └───temp
    ├───js
    │   └───libs
    ├───less
    │   └───bootstrap
    └───styles
        ├───blue
        ├───green
        └───purple
                                    </pre>
                            </div>
                        </div>
                        <div class="description">
                            <dl class="clearfix">
                                <dt class="parent">docs/</dt><dd>contains this documentation.</dd>
                                <dt class="parent">sweet-candy-css/</dt><dd>contains Sweet Candy UI Kit in simple CSS format. Use it to easily start your project.</dd>
                                <dt>css/</dt><dd>contains all the stylesheets for CSS version of the kit.</dd>
                                <dt>fonts/</dt><dd>contains Bootstrap Glyphicons for CSS version of the kit.</dd>
                                <dt>images/</dt><dd>contains all the images for CSS version of the kit.</dd>
                                <dt>images/icons/</dt><dd>contains all the icons for CSS version of the kit.</dd>
                                <dt>images/temp/</dt><dd>contains all the temporary images for CSS version of the kit.</dd>
                                <dt>js/</dt><dd>contains all the JS files for CSS version of the kit.</dd>
                                <dt>styles/</dt><dd>contains all the stylesheets for different color schemes (CSS Version).</dd>
                                <dt>styles/blue/</dt><dd>contains all the images for Blue color scheme (CSS Version).</dd>
                                <dt>styles/green/</dt><dd>contains all the images for Green color scheme (CSS Version).</dd>
                                <dt>styles/purple/</dt><dd>contains all the images for Purple color scheme (CSS Version).</dd>

                                <dt class="parent">sweet-candy-less/</dt><dd>contains Sweet Candy UI Kit in LESS format. Use it to modify this kit in your project.</dd>
                                <dt>fonts/</dt><dd>contains Bootstrap Glyphicons for LESS version of the kit.</dd>
                                <dt>images/</dt><dd>contains all the images for LESS version of the kit.</dd>
                                <dt>images/icons/</dt><dd>contains all the icons for LESS version of the kit.</dd>
                                <dt>images/temp/</dt><dd>contains all the temporary images for LESS version of the kit.</dd>
                                <dt>js/</dt><dd>contains all the JS files for LESS version of the kit.</dd>
                                <dt>less/</dt><dd>contains all the stylesheets for LESS version of the kit.</dd>
                                <dt>styles/</dt><dd>contains all the stylesheets for different color schemes (LESS Version).</dd>
                                <dt>styles/blue/</dt><dd>contains all the images for Blue color scheme (LESS Version).</dd>
                                <dt>styles/green/</dt><dd>contains all the images for Green color scheme (LESS Version).</dd>
                                <dt>styles/purple/</dt><dd>contains all the images for Purple color scheme (LESS Version).</dd>
                            </dl>

                            <p><em>Note:</em> The folders <code>sweet-candy-css</code> and <code>sweet-candy-less</code> is fully independent from each other, including all the images and JS files. You can use the version you prefer without pulling images or JS files from the other version of the kit.</p>
                        </div>
                    </div>
                    <!--/ What's included -->

                    <!-- Browser support -->
                    <div class="section-demo">
                        <h2 id="browser">Browser support</h2>

                        <div class="description">
                            <p>Since <a href="http://pixelkit.com/previews/colorful-ui-kit/" target="_blank">Sweet Candy UI Kit</a> is built on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a> framework, it supports the same <a href="http://getbootstrap.com/getting-started/#browsers" target="_blank">browsers</a> as Bootstrap.</p>
                        </div>

                    </div>
                    <!--/ Browser support -->

                    <!-- Getting Started -->
                    <div class="section-demo">
                        <h2 id="getting-started">Getting Started</h2>

                        <div class="description">
                            <p>To start working with <a href="http://pixelkit.com/previews/colorful-ui-kit/" target="_blank">Sweet Candy UI Kit</a> you can use a basic <code>template.html</code>, or take the completely functional pages included in this package. Since it is built on Bootstrap, you can also use it on your project with Bootstrap 3.
                                <br />
                                We provide you both CSS and LESS standalone versions which are completely identical in design and functions.
                            </p>
                            <p>
                                <em>CSS Version:</em> You can use CSS version by dropping contents of <code>sweet-candy-css</code> folder to your project folder and including <code>style.css</code> file in your HTML page: <code>&lt;link href="style.css" media="screen" rel="stylesheet"></code>
                            </p>
                            <p>
                                <em>LESS Version:</em> You can find it in <code>sweet-candy-less</code> folder. Use LESS if you want to modify Sweet Candy UI Kit. We built it Bootstrap way so you won't find big difference. Use <code>less/variables.less</code> to modify different styles, use <code>style.less</code> to remove needless components.
                            </p>
                            <p>
                                If you want to start from scratch, the best way is to use <a href="#template">our template</a> where all startup files are already included and ready to be used. You can find <code>template.html</code> file both for CSS and LESS version in their respective folders.
                            </p>
                        </div>

                    </div>
                    <!-- Getting Started -->

                    <!-- Basic Template -->
                    <div class="section-demo">
                        <h2 id="template">Basic Template</h2>

                        <div class="description">
                            <p>You can use a basic <a href="../sweet-candy-css/template.html" target="_blank">HTML template</a> to write your code, or take completely functional pages included in this package. Basic template as well as completely functional pages are available both for CSS and LESS versions of the Sweet Candy UI Kit.</p>
                        </div>
                        <div class="example">
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;!doctype html>
&lt;!--[if lt IE 7 ]>&lt;html lang="en" class="no-js ie6"> &lt;![endif]-->
&lt;!--[if IE 7 ]>&lt;html lang="en" class="no-js ie7"> &lt;![endif]-->
&lt;!--[if IE 8 ]>&lt;html lang="en" class="no-js ie8"> &lt;![endif]-->
&lt;!--[if IE 9 ]>&lt;html lang="en" class="no-js ie9"> &lt;![endif]-->
&lt;!--[if (gt IE 9)|!(IE)]>&lt;!-->&lt;html lang="en" class="no-js">&lt;!--&lt;![endif]-->
&lt;head>
    &lt;meta charset="utf-8">
    &lt;meta name="author" content="">
    &lt;meta name="keywords" content="">
    &lt;meta name="viewport" content="width=device-width,initial-scale=1">
    &lt;title>&lt;/title>

    &lt;!-- main JS libs -->
    &lt;script src="js/libs/modernizr.min.js">&lt;/script>
    &lt;script src="js/libs/jquery-1.10.0.js">&lt;/script>
    &lt;script src="js/libs/jquery-ui.min.js">&lt;/script>
    &lt;script src="js/libs/bootstrap.min.js">&lt;/script>

    &lt;!-- Style CSS -->
    &lt;link href="css/bootstrap.css" media="screen" rel="stylesheet">
    &lt;link href="style.css" media="screen" rel="stylesheet">

    &lt;!-- scripts -->
    &lt;script src="js/general.js">&lt;/script>

    &lt;!-- Include all needed stylesheets and scripts here -->

    &lt;!--[if lt IE 9]>&lt;script src="js/respond.min.js">&lt;/script>&lt;![endif]-->
    &lt;!--[if gte IE 9]>
    &lt;style type="text/css">
        .gradient {filter: none !important;}
    &lt;/style>
    &lt;![endif]-->
&lt;/head>

&lt;body>
    &lt;!-- container -->
    &lt;div class="container">

        Start your work here.

    &lt;/div>
    &lt;!--/ container -->
&lt;/body>
&lt;/html>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!-- Basic Template -->

                    <!-- Typography -->
                    <div class="section-demo">
                        <h2 id="typography">Typography</h2>

                        <div class="description">
                            <p>
                                Sweet Candy UI Kit uses free <a href="http://www.google.com/fonts#UsePlace:use/Collection:Scada" target="_blank">Scada</a> webfont available at the <a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>. The global default font-size is 14px, with a font-weight of 400. This is applied to the <code>&lt;body></code>. In addition, all <code>&lt;p></code> (paragraphs) receive bottom margin of 16px.
                                <br />
                                Also, all headings, <code>&lt;h1></code> through <code>&lt;h6></code> are available.
                            </p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <h1>Example (h1)</h1>
                                <h2>Example (h2)</h2>
                                <h3>Example (h3)</h3>
                                <h4>Example (h4)</h4>
                                <h5>Example (h5)</h5>
                                <h6>Example (h6)</h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                            </div>
                            <div class="example-code">
                                    <pre class="prettyprint">
&lt;h1>Example (h1)&lt;/h1>
&lt;h2>Example (h2)&lt;/h2>
&lt;h3>Example (h3)&lt;/h3>
&lt;h4>Example (h4)&lt;/h4>
&lt;h5>Example (h5)&lt;/h5>
&lt;h6>Example (h6)&lt;/h6>
&lt;p>Lorem ipsum dolor sit amet.&lt;/p>
&lt;p>Lorem ipsum dolor sit amet.&lt;/p>
                                    </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Typography -->

                    <!-- Buttons -->
                    <div class="section-demo">
                        <h2 id="buttons">Buttons</h2>

                        <!--/ Simple Buttons -->
                        <div class="description">
                            <h3 id="buttons-simple">Simple Buttons</h3>
                            <p>Use any of the available button classes to quickly create a simple button.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn"><span>Default</span></a>
                                <a href="#" class="btn btn-yellow"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue"><span>Blue</span></a>
                                <a href="#" class="btn btn-green"><span>Green</span></a>
                                <a href="#" class="btn btn-grey"><span>Grey</span></a>
                                <a href="#" class="btn btn-white"><span>White</span></a>
                                <a href="#" class="btn btn-purple"><span>Purple</span></a>
                                <br />
                                <a href="#" class="btn btn-yellow btn-large"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-large"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-large"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-large"><span>Purple</span></a>
                                <a href="#" class="btn btn-grey btn-large"><span>Grey</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn">&lt;span>Default&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-yellow">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-grey">&lt;span>Grey&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-white">&lt;span>White&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple">&lt;span>Purple&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-yellow btn-large">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-large">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-large">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-large">&lt;span>Purple&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-grey btn-large">&lt;span>Grey&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Simple Buttons -->

                        <!-- Rounded Buttons -->
                        <div class="description">
                            <h3 id="buttons-rounded">Buttons with rounded corners</h3>
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn btn-yellow btn-round"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-round"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-round"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-round"><span>Purple</span></a>
                                <br />
                                <a href="#" class="btn btn-yellow btn-round btn-large"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-round btn-large"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-round btn-large"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-round btn-large"><span>Purple</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn btn-yellow btn-round">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-round">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-round">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-round">&lt;span>Purple&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-yellow btn-round btn-large">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-round btn-large">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-round btn-large">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-round btn-large">&lt;span>Purple&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Rounded Buttons -->

                        <!-- Hovered Buttons -->
                        <div class="description">
                            <h3 id="buttons-hovered">Rounded Buttons with hover effect</h3>
                            <p>Button with hover and active states. Four color styles available.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn btn-hover btn-yellow"><span>Normal</span></a>
                                <a href="#" class="btn btn-hover btn-yellow hover"><span>Hover</span></a>
                                <a href="#" class="btn btn-hover btn-yellow active"><span>Pressed</span></a>
                                <br />
                                <a href="#" class="btn btn-hover btn-blue"><span>Normal</span></a>
                                <a href="#" class="btn btn-hover btn-blue hover"><span>Hover</span></a>
                                <a href="#" class="btn btn-hover btn-blue active"><span>Pressed</span></a>
                                <br />
                                <a href="#" class="btn btn-hover btn-green"><span>Normal</span></a>
                                <a href="#" class="btn btn-hover btn-green hover"><span>Hover</span></a>
                                <a href="#" class="btn btn-hover btn-green active"><span>Pressed</span></a>
                                <br />
                                <a href="#" class="btn btn-hover btn-purple"><span>Normal</span></a>
                                <a href="#" class="btn btn-hover btn-purple hover"><span>Hover</span></a>
                                <a href="#" class="btn btn-hover btn-purple active"><span>Pressed</span></a>
                                <br />
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn btn-hover btn-yellow">&lt;span>Yellow&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-hover btn-blue">&lt;span>Blue&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-hover btn-green">&lt;span>Green&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-hover btn-purple">&lt;span>Purple&lt;/span>&lt;/a>

                                </pre>
                            </div>
                        </div>
                        <!--/ Hovered Buttons -->

                        <!--/ Shaped Buttons -->
                        <div class="description">
                            <h3 id="buttons-shaped">Shaped Buttons</h3>
                            <p>Buttons with left and right pointers.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn btn-yellow btn-right"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-right"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-right"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-right"><span>Purple</span></a>
                                <br />
                                <a href="#" class="btn btn-yellow btn-left"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-left"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-left"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-left"><span>Purple</span></a>
                                <br />
                                <a href="#" class="btn btn-yellow btn-right btn-large"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-right btn-large"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-right btn-large"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-right btn-large"><span>Purple</span></a>
                                <br />
                                <a href="#" class="btn btn-yellow btn-left btn-large"><span>Yellow</span></a>
                                <a href="#" class="btn btn-blue btn-left btn-large"><span>Blue</span></a>
                                <a href="#" class="btn btn-green btn-left btn-large"><span>Green</span></a>
                                <a href="#" class="btn btn-purple btn-left btn-large"><span>Purple</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn btn-yellow btn-right">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-right">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-right">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-right">&lt;span>Purple&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-yellow btn-left">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-left">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-left">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-left">&lt;span>Purple&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-yellow btn-right btn-large">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-right btn-large">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-right btn-large">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-right btn-large">&lt;span>Purple&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-yellow btn-left btn-large">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue btn-left btn-large">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green btn-left btn-large">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-purple btn-left btn-large">&lt;span>Purple&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Shaped Buttons -->

                        <!--/ Buttons with Icons -->
                        <div class="description">
                            <h3 id="buttons-special">Buttons with Icons</h3>
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn btn-icon"><span><i class="icon-statistic"></i>Statistic</span></a>
                                <a href="#" class="btn btn-icon"><span><i class="icon-favorites"></i>Favorites</span></a>
                                <a href="#" class="btn btn-icon"><span><i class="icon-comments"></i>Comments</span></a>
                                <a href="#" class="btn btn-icon"><span><i class="icon-games"></i>Games</span></a>
                                <a href="#" class="btn btn-icon"><span><i class="icon-world"></i>World</span></a>
                                <a href="#" class="btn btn-icon"><span><i class="icon-photo"></i>Photography</span></a>
                                <br />
                                <a href="#" class="btn btn-icon btn-left"><span><i class="icon-design"></i>Design</span></a>
                                <a href="#" class="btn btn-icon btn-left"><span><i class="icon-ideas"></i>Ideas</span></a>
                                <a href="#" class="btn btn-icon btn-right"><span><i class="icon-tv"></i>TV Show</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn btn-icon">&lt;span>&lt;i class="icon-statistic">&lt;/i>Statistic&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon">&lt;span>&lt;i class="icon-favorites">&lt;/i>Favorites&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon">&lt;span>&lt;i class="icon-comments">&lt;/i>Comments&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon">&lt;span>&lt;i class="icon-games">&lt;/i>Games&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon">&lt;span>&lt;i class="icon-world">&lt;/i>World&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon">&lt;span>&lt;i class="icon-photo">&lt;/i>Photography&lt;/span>&lt;/a>

&lt;a href="#" class="btn btn-icon btn-left">&lt;span>&lt;i class="icon-design">&lt;/i>Design&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon btn-left">&lt;span>&lt;i class="icon-ideas">&lt;/i>Ideas&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-icon btn-right">&lt;span>&lt;i class="icon-tv">&lt;/i>TV Show&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Buttons with Icons -->

                        <!-- Buttoned Input -->
                        <div class="description">
                            <h3 id="buttons-input">Buttoned Input</h3>
                            <p>Wrap <code>input type="submit"</code> into <code>span</code> and use available button classes to create a styled Input.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <span class="btn btn-hover btn-blue"><input type="submit" value="Send Message" /></span>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;span class="btn btn-hover btn-blue">&lt;input type="submit" value="Send Message" />&lt;/span>
                                </pre>
                            </div>
                        </div>
                        <!--/ Buttoned Input -->
                    </div>
                    <!--/ Buttons -->

                    <!-- Ribbons -->
                    <div class="section-demo">
                        <h2 id="ribbons">Ribbons</h2>

                        <div class="description">
                            <p>Easily highlight items with Ribbons.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-ribbons">
                                <div class="ribbon"><span>Default Ribbon</span></div>
                                <div class="ribbon ribbon_blue"><span>Blue Ribbon</span></div>
                                <div class="ribbon ribbon_green"><span>Green Ribbon</span></div>
                                <div class="ribbon ribbon_purple"><span>Purple Ribbon</span></div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="ribbon">&lt;span>Default Ribbon&lt;/span>&lt;/div>
&lt;div class="ribbon ribbon_blue">&lt;span>Blue Ribbon&lt;/span>&lt;/div>
&lt;div class="ribbon ribbon_green">&lt;span>Green Ribbon&lt;/span>&lt;/div>
&lt;div class="ribbon ribbon_purple">&lt;span>Purple Ribbon&lt;/span>&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Ribbons -->

                    <!-- Badges -->
                    <div class="section-demo">
                        <h2 id="badges">Badges</h2>

                        <div class="description">
                            <p>Easily highlight items with Badges.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-ribbons">
                                <div class="badge"></div>
                                <div class="badge badge_blue"></div>
                                <div class="badge badge_green"></div>
                                <div class="badge badge_purple"></div>
                                <div class="badge badge-small"><span></span></div>
                                <div class="badge badge-small badge_green"><span></span></div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="badge">&lt;/div>
&lt;div class="badge badge_blue">&lt;/div>
&lt;div class="badge badge_green">&lt;/div>
&lt;div class="badge badge_purple">&lt;/div>
                                    
&lt;div class="badge badge-small">&lt;span>&lt;/span>&lt;/div>
&lt;div class="badge badge-small badge_green">&lt;span>&lt;/span>&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Badges -->

                    <!-- Rating Stars -->
                    <div class="section-demo">
                        <h2 id="rating-stars">Rating Stars</h2>

                        <div class="description">
                            <p>Use rating stars for voting.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <!-- Rating Stars -->
                                <div class="rating">
                                    <span class="star on"><input type="hidden" value="1"></span><!--
                                    --><span class="star on"><input type="hidden" value="2"></span><!--
                                    --><span class="star on"><input type="hidden" value="3"></span><!--
                                    --><span class="star off"><input type="hidden" value="4"></span><!--
                                    --><span class="star off"><input type="hidden" value="5"></span>
                                </div>
                                <!--/ Rating Stars -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="rating">
    &lt;span class="star on">&lt;input type="hidden" value="1">&lt;/span>&lt;!--
    -->&lt;span class="star on">&lt;input type="hidden" value="2">&lt;/span>&lt;!--
    -->&lt;span class="star on">&lt;input type="hidden" value="3">&lt;/span>&lt;!--
    -->&lt;span class="star off">&lt;input type="hidden" value="4">&lt;/span>&lt;!--
    -->&lt;span class="star off">&lt;input type="hidden" value="5">&lt;/span>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Rating Stars -->

                    <!-- Form Elements -->
                    <div class="section-demo">
                        <h2 id="form">Form Elements</h2>

                        <!-- CheckBoxes -->
                        <div class="description">
                            <h3 id="form-checkboxes">Checkboxes</h3>
                            <p>Use styled checkboxes instead of the usual ones.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Attribute <code>name</code> required for <code>input</code> element.</p>
                                <p>Styled Checkbox require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.customInput.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-checkbox">
                                <div class="input_styled checklist">
                                    <div class="rowCheckbox"><input name="check-1" type="checkbox" checked id="check-1" value="check-1"><label for="check-1">Default Checkbox</label></div>
                                    <div class="rowCheckbox rowCheckbox-blue"><input name="check-2" type="checkbox" checked id="check-2" value="check-2"><label for="check-2">Blue Checkbox</label></div>
                                    <div class="rowCheckbox rowCheckbox-purple"><input name="check-3" type="checkbox" checked id="check-3" value="check-3"><label for="check-3">Purple Checkbox</label></div>
                                    <div class="rowCheckbox rowCheckbox-yellow"><input name="check-4" type="checkbox" checked id="check-4" value="check-4"><label for="check-4">Yellow Checkbox</label></div>
                                    <div class="rowCheckbox checkbox-large"><input name="check-5" type="checkbox" checked id="check-5" value="check-5"><label for="check-5">Switch</label></div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="input_styled checklist">
    &lt;div class="rowCheckbox">
        &lt;input name="check-1" type="checkbox" id="check-1" value="check-1">
        &lt;label for="check-1">Default Checkbox&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox rowCheckbox-blue">
        &lt;input name="check-2" type="checkbox" id="check-2" value="check-2">
        &lt;label for="check-2">Blue Checkbox&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox rowCheckbox-purple">
        &lt;input name="check-3" type="checkbox" id="check-3" value="check-3">
        &lt;label for="check-3">Purple Checkbox&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox rowCheckbox-yellow">
        &lt;input name="check-4" type="checkbox" id="check-4" value="check-4">
        &lt;label for="check-4">Yellow Checkbox&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox checkbox-large">
        &lt;input name="check-5" type="checkbox" id="check-5" value="check-5">
        &lt;label for="check-5">Switch&lt;/label>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ CheckBoxes -->

                        <!-- Radios -->
                        <div class="description">
                            <h3 id="form-radios">Radio Buttons</h3>
                            <p>Use styled radio buttons instead of the usual ones.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Attribute <code>name</code> required for <code>input</code> element.</p>
                                <p>Styled Radio Button require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.customInput.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-checkbox">
                                <div class="input_styled inlinelist">
                                    <div class="rowRadio"><input type="radio" name="ex-radio" value="radio-1" id="radio-1" checked> <label for="radio-1">Default Radio</label></div>
                                    <div class="rowRadio rowRadio-blue"><input type="radio" name="ex-radio" value="radio-2" id="radio-2"> <label for="radio-2">Blue Radio</label></div>
                                    <div class="rowRadio rowRadio-purple"><input type="radio" name="ex-radio" value="radio-3" id="radio-3"> <label for="radio-3">Purple Radio</label></div>
                                    <div class="rowRadio rowRadio-yellow"><input type="radio" name="ex-radio" value="radio-4" id="radio-4"> <label for="radio-4">Yellow Radio</label></div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="input_styled inlinelist">
    &lt;div class="rowRadio">
        &lt;input type="radio" name="ex-radio" value="radio-1" id="radio-1" checked>
        &lt;label for="radio-1">Default Radio&lt;/label>
    &lt;/div>
    &lt;div class="rowRadio rowRadio-blue">
        &lt;input type="radio" name="ex-radio" value="radio-2" id="radio-2">
        &lt;label for="radio-2">Blue Radio&lt;/label>
    &lt;/div>
    &lt;div class="rowRadio rowRadio-purple">
        &lt;input type="radio" name="ex-radio" value="radio-3" id="radio-3">
        &lt;label for="radio-3">Purple Radio&lt;/label>
    &lt;/div>
    &lt;div class="rowRadio rowRadio-yellow">
        &lt;input type="radio" name="ex-radio" value="radio-4" id="radio-4">
        &lt;label for="radio-4">Yellow Radio&lt;/label>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ Radios -->

                        <!-- Text Inputs -->
                        <div class="description">
                            <h3 id="form-inputs">Text Inputs</h3>
                            <p>All Text inputs are styled.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Text Inputs with <code>placeholders</code> require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.powerful-placeholder.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color clearfix">
                                <div class="field_text">
                                    <input type="text" name="name" id="name" placeholder="Name">
                                </div>
                                <div class="field_text omega">
                                    <input type="text" name="email2" id="email2" placeholder="Email">
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="field_text">
    &lt;input type="text" name="name" id="name" placeholder="Name">
&lt;/div>

&lt;div class="field_text omega">
    &lt;input type="text" name="email" id="email" placeholder="Email">
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ Text Inputs -->

                        <!-- TextAreas -->
                        <div class="description">
                            <h3 id="form-textarea">Textareas</h3>
                            <p>All Textareas are styled similar to Text inputs.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Textareas with <code>placeholders</code> require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.powerful-placeholder.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color clearfix">
                                <div class="field_text field_textarea">
                                    <textarea id="message" placeholder="Message"></textarea>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="field_text field_textarea">
    &lt;textarea id="message" placeholder="Message">&lt;/textarea>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ TextAreas -->
                    </div>
                    <!--/ Form Elements -->

                     <!-- Scroll Bars -->
                    <div class="section-demo">
                        <h2 id="scroll-bars">Scroll Bars</h2>

                        <div class="description">
                            <p>Use any of the available classes to quickly create a styled Scroll Bar for your site.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Styled Scroll Bar require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.mousewheel.js">&lt;/script>
&lt;script src="js/jquery.jscrollpane.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <!-- ScrollBars -->
                                <div class="scrollbars">
                                    <div class="scrollbar">
                                        <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                    </div>
                                    <div class="scrollbar style2">
                                        <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                    </div>
                                    <div class="scrollbar style3">
                                        <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                    </div>
                                    <div class="scrollbar style4">
                                        <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                    </div>
                                    <div class="scrollbar style5">
                                        <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                    </div>
                                    <div class="scrollbar style6">
                                        <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                    </div>
                                </div>
                                <!--/ ScrollBars -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="scrollbar">
    &lt;!--Place your content here-->
&lt;/div>

&lt;div class="scrollbar style2">
    &lt;!--Place your content here-->
&lt;/div>

&lt;div class="scrollbar style3">
    &lt;!--Place your content here-->
&lt;/div>

&lt;div class="scrollbar style4">
    &lt;!--Place your content here-->
&lt;/div>

&lt;div class="scrollbar style5">
    &lt;!--Place your content here-->
&lt;/div>
                                    
&lt;div class="scrollbar style6">
    &lt;!--Place your content here-->
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Scroll Bars via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style2').jScrollPane({
            verticalDragMaxHeight: 55,
            verticalDragMinHeight:55
        });

        jQuery('.scrollbar.style3').jScrollPane({
            verticalDragMaxHeight: 16,
            verticalDragMinHeight:16
        });

        jQuery('.scrollbar.style4').jScrollPane({
            verticalDragMaxHeight: 43,
            verticalDragMinHeight:43
        });

        jQuery('.scrollbar.style5').jScrollPane({
            verticalDragMaxHeight: 16,
            verticalDragMinHeight:16
        });

        jQuery('.scrollbar.style6').jScrollPane({
            verticalDragMaxHeight: 23,
            verticalDragMinHeight:23
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Scroll Bars -->

                    <!-- Progress Bars -->
                    <div class="section-demo">
                        <h2 id="progress-bars">Progress Bars</h2>

                        <div class="description">
                            <p>Use styled Progress Bars on your site.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Styled Progress Bar require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery-ui.min.js">&lt;/script>
&lt;script src="js/progressbar.js">&lt;/script>
                                </pre>
                            </div>

                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <!-- Progress Bar -->
                                <div id="progressBar1" class="progressbar">
                                    <span class="mark-left">0%</span>
                                    <span class="mark-right">100%</span>
                                    <div class="percent"></div>
                                    <div class="pbar"></div>
                                    <div class="elapsed"></div>
                                    <div class="remained"></div>
                                </div>
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $('#progressBar1').anim_progressbar({
                                            totaltime: 600
                                        });
                                    });
                                </script>
                                <!--/ Progress Bar -->

                                <!-- Progress Bar with download Bar -->
                                <div id="progressBar2" class="progressbar style2">
                                    <span class="mark-left">0%</span>
                                    <span class="mark-right">100%</span>
                                    <div class="percent"></div>
                                    <div class="pbar">
                                        <div id="downloadBar2" class="downloadbar">
                                            <div class="pbar"></div>
                                        </div>
                                    </div>
                                    <div class="elapsed"></div>
                                    <div class="remained"></div>

                                </div>
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $('#progressBar2').anim_progressbar({
                                            totaltime: 800
                                        });
                                        $('#downloadBar2').anim_progressbar({
                                            totaltime: 500
                                        });
                                    });
                                </script>
                                <!--/ Progress Bar with download Bar -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;!-- Default Progress Bar -->
&lt;div id="progressBar1" class="progressbar">
    &lt;span class="mark-left">0%&lt;/span>
    &lt;span class="mark-right">100%&lt;/span>
    &lt;div class="percent">&lt;/div>
    &lt;div class="pbar">&lt;/div>
    &lt;div class="elapsed">&lt;/div>
    &lt;div class="remained">&lt;/div>
&lt;/div>

&lt;!-- Progress Bar with download Bar -->
&lt;div id="progressBar2" class="progressbar style2">
    &lt;span class="mark-left">0%&lt;/span>
    &lt;span class="mark-right">100%&lt;/span>
    &lt;div class="percent">&lt;/div>
    &lt;div class="pbar">
        &lt;div id="downloadBar2" class="downloadbar">
            &lt;div class="pbar">&lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="elapsed">&lt;/div>
    &lt;div class="remained">&lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Progress Bars via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    $(document).ready(function() {

        // Default Progress Bar
        $('#progressBar1').anim_progressbar({
            totaltime: 600
        });

        // Progress Bar with download Bar
        $('#progressBar2').anim_progressbar({
            totaltime: 800
        });
        $('#downloadBar2').anim_progressbar({
            totaltime: 500
        });

    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Progress Bars -->

                    <!-- Price Range -->
                    <div class="section-demo">
                        <h2 id="range-slider">Range Slider</h2>

                        <div class="description">
                            <p>Range Slider allow users to select a value from a numerical range by simply dragging a slider.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Range Slider require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery-ui.min.js">&lt;/script>
&lt;script src="js/jquery.slider.bundle.js">&lt;/script>
&lt;script src="js/jquery.slider.js">&lt;/script>
&lt;link rel="stylesheet" href="css/jslider.css">
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <!-- Range slider -->
                                <div class="range-slider">
                                    <input id="price_range" type="text" name="price_range" value="260;800">
                                </div>
                                <script type="text/javascript" >
                                    jQuery(document).ready(function($) {
                                        // Price Range Input
                                        $("#price_range").rangeslider({
                                            from: 50,
                                            to: 1000,
                                            limits: false,
                                            scale: ['$50', '$1000'],
                                            heterogeneity: ['50/500'],
                                            step: 10,
                                            smooth: true,
                                            dimension: '$'
                                        });
                                    });
                                </script>
                                <!-- Range slider -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="range-slider">
    &lt;input id="price_range" type="text" name="price_range" value="260;800">
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Price Range via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript" >
    jQuery(document).ready(function($) {
        $("#price_range").rangeslider({
            from: 50,
            to: 1000,
            limits: false,
            scale: ['$50', '$1000'],
            heterogeneity: ['50/500'],
            step: 10,
            smooth: true,
            dimension: '$'
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Price Range -->

                    <!-- Knobs -->
                    <div class="section-demo">
                        <h2 id="knobs">Knobs</h2>

                        <div class="description">
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Knob elements require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script type="text/javascript" src="js/knobRot-0.2.2.js">&lt;/script>
                                </pre>
                            </div>
                        </div>

                        <!-- Volume Knob -->
                        <div class="description">
                            <h3 id="knobs-volume">Volume Knob</h3>
                            <p>Adjust volume with this element.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <!-- Volume control -->
                                <div class="widget-knob widget-volume">
                                    <input type="text" value="77"  autocomplete="off" id="volume" />
                                    <script type="text/javascript">
                                        $(document).ready(function() {
                                            $('#volume').knobRot({
                                                'classes': ['volume'],
                                                'dragVertical': false,
                                                'frameCount': 58,
                                                'frameWidth': 80,
                                                'frameHeight': 80,
                                                'detent': true,
                                                'detentThreshold': 5,
                                                'minimumValue': 0,
                                                'maximumValue': 100,
                                                'hideInput': true
                                            });
                                        });
                                    </script>
                                </div>
                                <!--/ Volume control -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-knob widget-volume">
    &lt;input type="text" value="77"  autocomplete="off" id="volume" />
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Volume via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    $(document).ready(function() {
        $('#volume').knobRot({
            'classes': ['volume'],
            'dragVertical': false,
            'frameCount': 58,
            'frameWidth': 80,
            'frameHeight': 80,
            'detent': true,
            'detentThreshold': 5,
            'minimumValue': 0,
            'maximumValue': 100,
            'hideInput': true
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                        <!-- Volume Knob -->

                        <!-- Balance Knob -->
                        <div class="description">
                            <h3 id="knobs-balance">Balance Knob</h3>
                            <p>Adjust balance with this element.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <!-- Balance control -->
                                <div class="widget-knob widget-balance">
                                    <input type="text" value="0" autocomplete="off" id="balance" />
                                    <script type="text/javascript">
                                        $(document).ready(function() {
                                            $('#balance').knobRot({
                                                'classes': ['balance'],
                                                'dragVertical': false,
                                                'frameCount': 35,
                                                'frameWidth': 120,
                                                'frameHeight': 120,
                                                'detent': true,
                                                'detentThreshold': 2,
                                                'minimumValue': -50,
                                                'maximumValue': 50,
                                                'hideInput': true
                                            });
                                        });
                                    </script>
                                </div>
                                <!--/ Balance control -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-knob widget-balance">
    &lt;input type="text" value="0" autocomplete="off" id="balance" />
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Balance via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    $(document).ready(function() {
        $('#balance').knobRot({
            'classes': ['balance'],
            'dragVertical': false,
            'frameCount': 35,
            'frameWidth': 120,
            'frameHeight': 120,
            'detent': true,
            'detentThreshold': 2,
            'minimumValue': -50,
            'maximumValue': 50,
            'hideInput': true
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                        <!-- Balance Knob -->
                    </div>
                    <!--/ Knobs -->

                    <!-- Navigation -->
                    <div class="section-demo">
                        <h2 id="navigation">Navigation</h2>

                        <!-- Website Menu -->
                        <div class="description">
                            <h3 id="website-menu">Website Menu</h3>
                            <p>Use it as a main menu for your site.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-10">
                                        <!-- Dropdown Menu -->
                                        <div class="dropdown-wrap">
                                            <i class="dropdown-icon dropdown-icon2"></i>
                                            <ul class="dropdown clearfix">
                                                <li class="menu-level-0"><a href="#"><span>Home</span></a>
                                                    <ul class="submenu-1">
                                                        <li class="menu-level-1"><a href="#">Two Columns</a></li>
                                                        <li class="menu-level-1"><a href="#">Three Columns</a></li>
                                                        <li class="menu-level-1"><a href="#">Four Columns</a></li>
                                                    </ul>
                                                </li>
                                                <li class="menu-level-0"><a href="#"><span>About</span></a>
                                                    <ul class="submenu-1">
                                                        <li class="menu-level-1"><a href="#">About Page</a></li>
                                                        <li class="menu-level-1"><a href="#">Pricing Page</a></li>
                                                        <li class="menu-level-1"><a href="#">Home Pages</a>
                                                            <ul class="submenu-2">
                                                                <li class="menu-level-2"><a href="#">Gallery images</a></li>
                                                                <li class="menu-level-2"><a href="#">OneByOne Slider</a></li>
                                                                <li class="menu-level-2"><a href="#">Video in header</a></li>
                                                                <li class="menu-level-2"><a href="#">Image &amp; Video Slider</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="menu-level-1"><a href="#">Services Page</a>
                                                            <ul class="submenu-2">
                                                                <li class="menu-level-2"><a href="#">Services Page (var1)</a></li>
                                                                <li class="menu-level-2"><a href="#">Services Page (var2)</a></li>
                                                            </ul>
                                                        </li>
                                                        <li class="menu-level-1"><a href="#">Sidebar Right</a></li>
                                                        <li class="menu-level-1"><a href="#">Sidebar Left</a></li>
                                                        <li class="menu-level-1"><a href="#">Shortcodes</a>
                                                            <ul class="submenu-2">
                                                                <li class="menu-level-2"><a href="#">Buttons &amp; Lists</a>
                                                                    <ul class="submenu-3">
                                                                        <li class="menu-level-3"><a href="#">Services Page (var1)</a></li>
                                                                        <li class="menu-level-3"><a href="#">Services Page (var2)</a></li>
                                                                    </ul>
                                                                </li>
                                                                <li class="menu-level-2"><a href="#">Text &amp; Images</a></li>
                                                                <li class="menu-level-2"><a href="#">Charts</a></li>
                                                            </ul>
                                                        </li>
                                                    </ul>
                                                </li>
                                                <li class="menu-level-0"><a href="#"><span>Contacts</span></a></li>
                                                <li class="menu-level-0"><a href="#"><span>Services</span></a></li>
                                                <li class="menu-level-0"><a href="#"><span>Portfolio</span></a></li>
                                                <li class="menu-level-0"><a href="#"><span>Team</span></a></li>
                                                <li class="menu-level-0"><a href="#"><span>Blog</span></a></li>
                                                <li class="menu-level-0"><a href="#"><span>Shop</span></a></li>
                                            </ul>
                                        </div>
                                        <!--/ Dropdown Menu -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="dropdown-wrap">
    &lt;i class="dropdown-icon dropdown-icon2">&lt;/i>
    &lt;ul class="dropdown clearfix">
        &lt;li>&lt;a href="#">&lt;span>Home&lt;/span>&lt;/a>
            &lt;ul>
                &lt;li>&lt;a href="#">Two Columns&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Three Columns&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Four Columns&lt;/a>&lt;/li>
            &lt;/ul>
        &lt;/li>
        &lt;li>&lt;a href="#">&lt;span>About&lt;/span>&lt;/a>
            &lt;ul>
                &lt;li>&lt;a href="#">About Page&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Pricing Page&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Home Pages&lt;/a>
                    &lt;ul>
                        &lt;li>&lt;a href="#">Gallery images&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">OneByOne Slider&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Video in header&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Image &amp; Video Slider&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/li>
                &lt;li>&lt;a href="#">Services Page&lt;/a>
                    &lt;ul>
                        &lt;li>&lt;a href="#">Services Page (var1)&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Services Page (var2)&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/li>
                &lt;li>&lt;a href="#">Sidebar Right&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Sidebar Left&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Shortcodes&lt;/a>
                    &lt;ul>
                        &lt;li>&lt;a href="#">Buttons &amp; Lists&lt;/a>
                            &lt;ul>
                                &lt;li>&lt;a href="#">Services Page (var1)&lt;/a>&lt;/li>
                                &lt;li>&lt;a href="#">Services Page (var2)&lt;/a>&lt;/li>
                            &lt;/ul>
                        &lt;/li>
                        &lt;li>&lt;a href="#">Text &amp; Images&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Charts&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/li>
            &lt;/ul>
        &lt;/li>
        &lt;li>&lt;a href="#">&lt;span>Contacts&lt;/span>&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">&lt;span>Services&lt;/span>&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">&lt;span>Portfolio&lt;/span>&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">&lt;span>Team&lt;/span>&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">&lt;span>Blog&lt;/span>&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">&lt;span>Shop&lt;/span>&lt;/a>&lt;/li>
    &lt;/ul>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!-- Website Menu -->

                        <!-- Dropdown Menu -->
                        <div class="description">
                            <h3 id="dropdown-menu">Dropdown Menu</h3>
                            <p>Use it as a single item menu.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <!-- Dropdown Menu Style 2 -->
                                <div class="dropdown-wrap styled">
                                    <i class="dropdown-icon dropdown-icon2"></i>
                                    <ul class="dropdown clearfix">
                                        <li class="menu-level-0"><a href="#"><span>Settings</span></a>
                                            <ul class="submenu-1">
                                                <li class="menu-level-1"><a href="#">About Page</a></li>
                                                <li class="menu-level-1"><a href="#">Pricing Page</a></li>
                                                <li class="menu-level-1"><a href="#">Home Pages</a>
                                                    <ul class="submenu-2">
                                                        <li class="menu-level-2"><a href="#">Gallery images</a></li>
                                                        <li class="menu-level-2"><a href="#">OneByOne Slider</a></li>
                                                        <li class="menu-level-2"><a href="#">Video in header</a></li>
                                                        <li class="menu-level-2"><a href="#">Image &amp; Video</a></li>
                                                    </ul>
                                                </li>
                                                <li class="menu-level-1"><a href="#">Services Page</a></li>
                                                <li class="menu-level-1"><a href="#">Sidebar Right</a></li>
                                                <li class="menu-level-1"><a href="#">Sidebar Left</a></li>
                                                <li class="menu-level-1"><a href="#">Shortcodes</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <!--/ Dropdown Menu Style 2 -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="dropdown-wrap styled">
    &lt;ul class="dropdown clearfix">
        &lt;li>&lt;a href="#">&lt;span>Settings&lt;/span>&lt;/a>
            &lt;ul>
                &lt;li>&lt;a href="#">About Page&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Pricing Page&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Home Pages&lt;/a>
                    &lt;ul>
                        &lt;li>&lt;a href="#">Gallery images&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">OneByOne Slider&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Video in header&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Image &amp; Video&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/li>
                &lt;li>&lt;a href="#">Services Page&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Sidebar Right&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Sidebar Left&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Shortcodes&lt;/a>&lt;/li>
            &lt;/ul>
        &lt;/li>
    &lt;/ul>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!-- Dropdown Menu -->
                    </div>
                    <!--/ Navigation -->

                    <!-- Tabs -->
                    <div class="section-demo">
                        <h2 id="tabs">Tabs</h2>

                        <div class="description">
                            <p>Add quick, dynamic tab functionality to transition through panes of local content. Two different Tab styles available.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-4">
                                        <!-- sidebar tabs -->
                                        <div class="tabs_framed">
                                            <div class="inner">
                                                <ul class="tabs clearfix active_bookmark1">
                                                    <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li>
                                                    <li><a href="#recent" data-toggle="tab">Recent</a></li>
                                                    <li><a href="#foo" data-toggle="tab">Tab 3</a></li>
                                                </ul>

                                                <div class="tab-content">
                                                    <div class="tab-pane fade in active" id="popular">
                                                        <h4>Young gypsy voice</h4>
                                                        <div class="tab_image"><img src="../sweet-candy-css/images/temp/tabimage1.png" alt="" /></div>
                                                        <p>Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.</p>
                                                    </div>
                                                    <div class="tab-pane fade" id="recent">
                                                        <h4>Toy Story 3</h4>
                                                        <div class="tab_image pull-left"><img src="../sweet-candy-css/images/temp/tabimage2.png" alt="" /></div>
                                                        <p>A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.</p>
                                                    </div>
                                                    <div class="tab-pane fade" id="foo">
                                                        <h4>Young gypsy voice</h4>
                                                        <div class="tab_image pull-right"><img src="../sweet-candy-css/images/temp/tabimage3.png" alt="" /></div>
                                                        <p>A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bottom"></div>
                                        </div>
                                        <!--/ sidebar tabs -->
                                    </div>
                                    <div class="col-md-8">
                                        <!-- tabs -->
                                        <div class="tabs_framed styled">
                                            <div class="inner">
                                                <div class="header-top"><span></span></div>
                                                <ul class="tabs clearfix active_bookmark1">
                                                    <li class="active"><a href="#events" data-toggle="tab">Events</a></li>
                                                    <li><a href="#reminders" data-toggle="tab"><sup class="note">5</sup>Reminders</a></li>
                                                    <li><a href="#starred" data-toggle="tab">Starred</a></li>
                                                    <li><a href="#archive" data-toggle="tab">Archive</a></li>
                                                    <li><a href="#tab5" data-toggle="tab">Tab5</a></li>
                                                </ul>

                                                <div class="tab-content">
                                                    <div class="tab-pane fade in active" id="events">
                                                        <div class="tab_image"><img src="../sweet-candy-css/images/temp/tabimage4.png" alt="" /></div>
                                                        <h4>23 December</h4>
                                                        <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                                        <a href="#" class="btn btn-blue btn-right"><span>See more</span></a>
                                                    </div>
                                                    <div class="tab-pane fade" id="reminders">
                                                        <div class="tab_image"><img src="../sweet-candy-css/images/temp/tabimage5.png" alt="" /></div>
                                                        <h4>5 November</h4>
                                                        <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                                        <a href="#" class="btn btn-blue btn-right"><span>See more</span></a>
                                                    </div>
                                                    <div class="tab-pane fade" id="starred">
                                                        <div class="tab_image"><img src="../sweet-candy-css/images/temp/tabimage6.png" alt="" /></div>
                                                        <h4>11 October</h4>
                                                        <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                                        <a href="#" class="btn btn-blue btn-right"><span>See more</span></a>
                                                    </div>
                                                    <div class="tab-pane fade" id="archive">
                                                        <div class="tab_image"><img src="../sweet-candy-css/images/temp/tabimage4.png" alt="" /></div>
                                                        <h4>14 September</h4>
                                                        <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                                        <a href="#" class="btn btn-blue btn-right"><span>See more</span></a>
                                                    </div>
                                                    <div class="tab-pane fade" id="tab5">
                                                        <div class="tab_image"><img src="../sweet-candy-css/images/temp/tabimage5.png" alt="" /></div>
                                                        <h4>27 August</h4>
                                                        <p>He made his film debut with a mirror part in Black to the Future Part II</p>
                                                        <a href="#" class="btn btn-blue btn-right"><span>See more</span></a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="bottom"></div>
                                        </div>
                                        <!--/ tabs -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;!--Tabs default style-->
&lt;div class="tabs_framed">
    &lt;div class="inner">
        &lt;ul class="tabs clearfix active_bookmark1">
            &lt;li class="active">&lt;a href="#popular" data-toggle="tab">Popular&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#recent" data-toggle="tab">Recent&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#foo" data-toggle="tab">Tab 3&lt;/a>&lt;/li>
        &lt;/ul>

        &lt;div class="tab-content">
            &lt;div class="tab-pane fade in active" id="popular">
                &lt;h4>Young gypsy voice&lt;/h4>
                &lt;div class="tab_image">&lt;img src="images/temp/tabimage1.png" alt="" />&lt;/div>
                &lt;p>
                    Intrepid Jonathan Trappe, 38, took off just like the 78-year-old character Carl Frederickson in the hit movie.
                &lt;/p>
            &lt;/div>
            &lt;div class="tab-pane fade" id="recent">
                &lt;h4>Toy Story 3&lt;/h4>
                &lt;div class="tab_image pull-left">&lt;img src="images/temp/tabimage2.png" alt="" />&lt;/div>
                &lt;p>
                    A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe
                &lt;/p>
            &lt;/div>
            &lt;div class="tab-pane fade" id="foo">
                &lt;h4>Young gypsy voice&lt;/h4>
                &lt;div class="tab_image pull-right">&lt;img src="images/temp/tabimage3.png" alt="" />&lt;/div>
                &lt;p>
                    A cluster balloonist who became the first person to fly the English Channel has Intrepid Jonathan Trappe
                &lt;/p>
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="bottom">&lt;/div>
&lt;/div>

&lt;!--Tabs alternative style-->
&lt;div class="tabs_framed styled">
    &lt;div class="inner">
        &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
        &lt;ul class="tabs clearfix active_bookmark1">
            &lt;li class="active">&lt;a href="#events" data-toggle="tab">Events&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#reminders" data-toggle="tab">&lt;sup class="note">5&lt;/sup>Reminders&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#starred" data-toggle="tab">Starred&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#archive" data-toggle="tab">Archive&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#tab5" data-toggle="tab">Tab5&lt;/a>&lt;/li>
        &lt;/ul>

        &lt;div class="tab-content">
            &lt;div class="tab-pane fade in active" id="events">
                &lt;div class="tab_image">&lt;img src="images/temp/tabimage4.png" alt="" />&lt;/div>
                &lt;h4>23 December&lt;/h4>
                &lt;p>He made his film debut with a mirror part in Black to the Future Part II&lt;/p>
                &lt;a href="#" class="btn btn-blue btn-right">&lt;span>See more&lt;/span>&lt;/a>
            &lt;/div>
            &lt;div class="tab-pane fade" id="reminders">
                &lt;div class="tab_image">&lt;img src="images/temp/tabimage5.png" alt="" />&lt;/div>
                &lt;h4>5 November&lt;/h4>
                &lt;p>He made his film debut with a mirror part in Black to the Future Part II&lt;/p>
                &lt;a href="#" class="btn btn-blue btn-right">&lt;span>See more&lt;/span>&lt;/a>
            &lt;/div>
            &lt;div class="tab-pane fade" id="starred">
                &lt;div class="tab_image">&lt;img src="images/temp/tabimage6.png" alt="" />&lt;/div>
                &lt;h4>11 October&lt;/h4>
                &lt;p>He made his film debut with a mirror part in Black to the Future Part II&lt;/p>
                &lt;a href="#" class="btn btn-blue btn-right">&lt;span>See more&lt;/span>&lt;/a>
            &lt;/div>
            &lt;div class="tab-pane fade" id="archive">
                &lt;div class="tab_image">&lt;img src="images/temp/tabimage4.png" alt="" />&lt;/div>
                &lt;h4>14 September&lt;/h4>
                &lt;p>He made his film debut with a mirror part in Black to the Future Part II&lt;/p>
                &lt;a href="#" class="btn btn-blue btn-right">&lt;span>See more&lt;/span>&lt;/a>
            &lt;/div>
            &lt;div class="tab-pane fade" id="tab5">
                &lt;div class="tab_image">&lt;img src="images/temp/tabimage5.png" alt="" />&lt;/div>
                &lt;h4>27 August&lt;/h4>
                &lt;p>He made his film debut with a mirror part in Black to the Future Part II&lt;/p>
                &lt;a href="#" class="btn btn-blue btn-right">&lt;span>See more&lt;/span>&lt;/a>
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="bottom">&lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Tabs -->

                    <!-- Dividers -->
                    <div class="section-demo">
                        <h2 id="dividers">Dividers</h2>

                        <div class="description">
                            <p>Separate content with dividers.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-12"><div class="divider"></div></div>
                                    <div class="col-md-6"><div class="divider"></div></div>
                                    <div class="col-md-6"><div class="divider"></div></div>
                                    <div class="col-md-4"><div class="divider"></div></div>
                                    <div class="col-md-4"><div class="divider"></div></div>
                                    <div class="col-md-4"><div class="divider"></div></div>
                                    <div class="clearfix"></div>
                                    <div class="col-md-12"><div class="divider dashed"></div></div>
                                    <div class="col-md-6"><div class="divider dashed"></div></div>
                                    <div class="col-md-6"><div class="divider dashed"></div></div>
                                    <div class="col-md-4"><div class="divider dashed"></div></div>
                                    <div class="col-md-4"><div class="divider dashed"></div></div>
                                    <div class="col-md-4"><div class="divider dashed"></div></div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="divider">&lt;/div>
                                    
&lt;div class="divider dashed">&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Dividers -->

                    <!-- Forms -->
                    <div class="section-demo">
                        <h2 id="forms">Forms</h2>

                        <div class="description">
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>All the forms require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.powerful-placeholder.min.js">&lt;/script>
                                </pre>
                            </div>
                        </div>

                        <!-- Contact Form -->
                        <div class="description">
                            <h3 id="forms-contact">Contact Form</h3>
                            <p></p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Contact Form require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;link rel="stylesheet" href="css/chosen.css">
&lt;script src="js/jquery.chosen.min.js" type="text/javascript">&lt;/script>
&lt;script src="js/nicEdit.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-8">
                                        <!-- comment form -->
                                        <div class="add-comment styled" id="addcomments">
                                            <div class="add-comment-title"><h3></h3></div>
                                            <div class="comment-form">
                                                <div class="header-top"><span></span></div>
                                                <script type="text/javascript">
                                                    bkLib.onDomLoaded(function() {
                                                        var myNicEditor = new nicEditor({
                                                            buttonList : [
                                                                'bold',
                                                                'italic',
                                                                'underline',
                                                                'forecolor',
                                                                'left',
                                                                'center',
                                                                'right',
                                                                'justify'
                                                            ]
                                                        });
                                                        myNicEditor.setPanel('edit_buttons');
                                                        myNicEditor.addInstance('styled_message');
                                                    });
                                                    setTimeout(function () {
                                                        $('.nicEdit-container').css('width', '331px');
                                                        $('.nicEdit-main').css('width', '307px');
                                                    }, 2000);
                                                </script>
                                                <form action="#" method="post" id="commentForm" class="ajax_form">
                                                    <div class="form-inner">
                                                        <div class="field_select">
                                                            <label for="contact_name" class="label_title">Name:</label>
                                                            <select name="contact_name" id="contact_name" multiple data-placeholder="Your Selection">
                                                                <option value='example1@gmail.com'>Black Sabbath</option>
                                                                <option value='example2@gmail.com'>Lana Ray</option>
                                                                <option value='example3@gmail.com'>Toby Lightman</option>
                                                                <option value='example4@gmail.com'>Lene Marlin</option>
                                                                <option value='example5@gmail.com'>Deep Purple</option>
                                                            </select>
                                                        </div>
                                                        <div class="field_text">
                                                            <label for="email" class="label_title">Email:</label>
                                                            <input type="text" name="email" id="email" value="" placeholder="Home orgoniation" class="inputtext input_middle required" />
                                                        </div>
                                                        <div class="clear"></div>
                                                        <div class="field_text field_textarea">
                                                            <div id="edit_buttons" class="edit_buttons"></div>
                                                            <label for="styled_message" class="label_title">Message</label>
                                                            <textarea cols="30" rows="10" name="styled_message" id="styled_message" placeholder="Hi how are you?" class="textarea textarea_middle required">Hi how are you?</textarea>
                                                        </div>
                                                        <div class="clear"></div>
                                                    </div>

                                                    <div class="rowSubmit">
                                                        <a onclick="document.getElementById('commentForm').reset();return false" href="#" class="link-reset btn"><span>Discard</span></a>
                                                        <span class="btn btn-yellow btn-right"><input type="submit" id="send" value="Send Message" /></span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <!--/ comment form -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="add-comment styled" id="addcomments">
    &lt;div class="add-comment-title">&lt;h3>&lt;/h3>&lt;/div>
    &lt;div class="comment-form">
        &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
        &lt;form action="#" method="post" id="commentForm" class="ajax_form">
            &lt;div class="form-inner">
                &lt;div class="field_select">
                    &lt;label for="contact_name" class="label_title">Name:&lt;/label>
                    &lt;select name="contact_name" id="contact_name" multiple data-placeholder="Your Selection">
                        &lt;option value='example1@gmail.com'>Black Sabbath&lt;/option>
                        &lt;option value='example2@gmail.com'>Lana Ray&lt;/option>
                        &lt;option value='example3@gmail.com'>Toby Lightman&lt;/option>
                        &lt;option value='example4@gmail.com'>Lene Marlin&lt;/option>
                        &lt;option value='example5@gmail.com'>Deep Purple&lt;/option>
                    &lt;/select>
                &lt;/div>
                &lt;div class="field_text">
                    &lt;label for="email" class="label_title">Email:&lt;/label>
                    &lt;input type="text" name="email" id="email" value="" placeholder="Home orgoniation" class="inputtext input_middle required" />
                &lt;/div>
                &lt;div class="clear">&lt;/div>
                &lt;div class="field_text field_textarea">
                    &lt;div id="edit_buttons" class="edit_buttons">&lt;/div>
                    &lt;label for="styled_message" class="label_title">Message&lt;/label>
                    &lt;textarea name="styled_message" id="styled_message" placeholder="Hi how are you?" class="textarea textarea_middle required">Hi how are you?&lt;/textarea>
                &lt;/div>
                &lt;div class="clear">&lt;/div>
            &lt;/div>

            &lt;div class="rowSubmit">
                &lt;a onclick="document.getElementById('commentForm').reset();return false" href="#" class="link-reset btn">&lt;span>Discard&lt;/span>&lt;/a>
                &lt;span class="btn btn-yellow btn-right">&lt;input type="submit" id="send" value="Send Message" />&lt;/span>
            &lt;/div>
        &lt;/form>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Contact Form via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">

    // Multiselect
    jQuery(document).ready(function() {
        jQuery('#contact_name').chosen({ width: "100%" });
    });

    // Text Editor
    bkLib.onDomLoaded(function() {
        var myNicEditor = new nicEditor({
            buttonList : [
                'bold',
                'italic',
                'underline',
                'forecolor',
                'left',
                'center',
                'right',
                'justify'
            ]
        });
        myNicEditor.setPanel('edit_buttons');
        myNicEditor.addInstance('styled_message');
    });
    setTimeout(function () {
        $('.nicEdit-container').css('width', '331px');
        $('.nicEdit-main').css('width', '307px');
    }, 2000);

&lt;/script>
                                </pre>
                            </div>
                        </div>
                        <!--/ Contact Form -->

                        <!-- Search Form -->
                        <div class="description">
                            <h3 id="forms-search">Search Form</h3>
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-4">
                                        <!-- search widget -->
                                        <div class="widget-container widget_search">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <form method="get" id="searchform1" action="#">
                                                    <div class="clearfix">
                                                        <input class="inputField" placeholder="Type word here"  value="" type="text" />
                                                        <span class="btn btn-blue btn-right omega"><input type="submit" id="searchsubmit1" value="Search" /></span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <!--/ search widget -->
                                    </div>

                                    <div class="col-md-8">
                                        <!-- search widget -->
                                        <div class="widget-container widget_search styled">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <form method="get" id="searchform2" action="#">
                                                    <div class="clearfix">
                                                        <input class="inputField" placeholder="Type word here"  value="" type="text" />
                                                        <span class="input_icon"></span>
                                                        <span class="btn btn-blue btn-right omega"><input type="submit" id="searchsubmit2" value="Search" /></span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                        <!--/ search widget -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;!-- Default Style -->
&lt;div class="widget-container widget_search">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;form method="get" id="searchform1" action="#">
            &lt;div class="clearfix">
                &lt;input class="inputField" placeholder="Type word here"  value="" type="text" />
                &lt;span class="btn btn-blue btn-right omega">&lt;input type="submit" id="searchsubmit1" value="Search" />&lt;/span>
            &lt;/div>
        &lt;/form>
    &lt;/div>
&lt;/div>
                                    
&lt;!-- Alternative Style -->
&lt;div class="widget-container widget_search styled">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;form method="get" id="searchform2" action="#">
            &lt;div class="clearfix">
                &lt;input class="inputField" placeholder="Type word here"  value="" type="text" />
                &lt;span class="input_icon">&lt;/span>
                &lt;span class="btn btn-blue btn-right omega">&lt;input type="submit" id="searchsubmit2" value="Search" />&lt;/span>
            &lt;/div>
        &lt;/form>
    &lt;/div>
&lt;/div>                                    
                                </pre>
                            </div>
                        </div>
                        <!--/ Search Form -->
                    </div>
                    <!--/ Forms -->

                    <!-- Pricing List -->
                    <div class="section-demo">
                        <h2 id="pricing">Pricing</h2>

                        <!-- Pricing List Style 1 -->
                        <div class="description">
                            <p>
                                Use pricing items to announce prices for your services. Three different pricing styles available. Add class <code>col_active</code> to <code>price_col</code> to highlight pricing item. Add color class to <code>price_col</code> class to change item color.
                                <br />Available color classes are the next: <code>price_col_green</code>, <code>price_col_blue</code>, <code>price_col_purple</code>.
                            </p>
                            <h3 id="pricing-def">Pricing Items default style</h3>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-pricing">
                                <!-- pricing1-->
                                <div class="pricing_box clearfix">
                                    <ul>

                                        <li class="price_col price_col_green">
                                            <!--pricing item-->
                                            <div class="price_item">
                                                <div class="inner">
                                                    <div class="price_col_head">
                                                        <span class="ribbon2"></span>
                                                        <div class="price">
                                                            <sup title="$">$</sup><!--
											--><span title="99">99</span><!--
											--><em title="/month">/month</em>
                                                        </div>
                                                    </div>
                                                    <div class="price_col_body clearfix">
                                                        <div class="price_body_inner">
                                                            <div class="price_body_top">
                                                                <strong>Basic</strong>
                                                                <span>All important futures for work</span>
                                                                <div class="line"></div>
                                                            </div>
                                                            <ul>
                                                                <li>Unlimited Traffic</li>
                                                                <li>20 gb in Cloud</li>
                                                                <li>0.5gbit/sec</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-white btn-square"><span>TRY A WEEK</span></a></div>
                                                </div>
                                            </div>
                                            <!--/ pricing-item -->
                                        </li>

                                        <li class="price_col col_active">
                                            <!--pricing item-->
                                            <div class="price_item">
                                                <div class="inner">
                                                    <div class="price_col_head">
                                                        <span class="ribbon2"></span>
                                                        <div class="price">
                                                            <sup title="$">$</sup><!--
											--><span title="299">299</span><!--
											--><em title="/month">/month</em>
                                                        </div>
                                                    </div>
                                                    <div class="price_col_body clearfix">
                                                        <div class="price_body_inner">
                                                            <div class="price_body_top">
                                                                <strong>Premium</strong>
                                                                <span>Lots of clients  & users</span>
                                                                <div class="line"></div>
                                                            </div>
                                                            <ul>
                                                                <li>Unlimited Traffic</li>
                                                                <li>50 gb in Cloud</li>
                                                                <li>1gbit/sec</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-yellow btn-right btn-large"><span>BUY NOW</span></a></div>
                                                </div>
                                            </div>
                                            <!--/ pricing-item -->
                                        </li>

                                        <li class="price_col price_col_blue">
                                            <!--pricing item-->
                                            <div class="price_item">
                                                <div class="inner">
                                                    <div class="price_col_head">
                                                        <span class="ribbon2"></span>
                                                        <div class="price">
                                                            <sup title="$">$</sup><!--
											--><span title="499">499</span><!--
											--><em title="/month">/month</em>
                                                        </div>
                                                    </div>
                                                    <div class="price_col_body clearfix">
                                                        <div class="price_body_inner">
                                                            <div class="price_body_top">
                                                                <strong>Ultimate</strong>
                                                                <span>All important futures for work</span>
                                                                <div class="line"></div>
                                                            </div>
                                                            <ul>
                                                                <li>Unlimited Traffic</li>
                                                                <li>80 gb in Cloud</li>
                                                                <li>2gbit/sec</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-white btn-square"><span>SUBSCRIBE NOW</span></a></div>
                                                </div>
                                            </div>
                                            <!--/ pricing-item -->
                                        </li>

                                    </ul>
                                </div>
                                <!--/ pricing1-->    
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="pricing_box clearfix">
    &lt;ul>

        &lt;li class="price_col price_col_green">
            &lt;div class="price_item">
                &lt;div class="inner">
                    &lt;div class="price_col_head">
                        &lt;span class="ribbon2">&lt;/span>
                        &lt;div class="price">
                            &lt;sup title="$">$&lt;/sup>&lt;!--
                            -->&lt;span title="99">99&lt;/span>&lt;!--
                            -->&lt;em title="/month">/month&lt;/em>
                        &lt;/div>
                    &lt;/div>
                    &lt;div class="price_col_body clearfix">
                        &lt;div class="price_body_inner">
                            &lt;div class="price_body_top">
                                &lt;strong>Basic&lt;/strong>
                                &lt;span>All important futures for work&lt;/span>
                                &lt;div class="line">&lt;/div>
                            &lt;/div>
                            &lt;ul>
                                &lt;li>Unlimited Traffic&lt;/li>
                                &lt;li>20 gb in Cloud&lt;/li>
                                &lt;li>0.5gbit/sec&lt;/li>
                            &lt;/ul>
                        &lt;/div>
                    &lt;/div>
                &lt;/div>
                &lt;div class="price_col_foot">
                    &lt;div class="sign_up">
                        &lt;a href="#" class="btn btn-white btn-square">&lt;span>try a Week&lt;/span>&lt;/a>
                    &lt;/div>
                &lt;/div>
            &lt;/div>
        &lt;/li>
        ...
        ...
        ...
    &lt;/ul>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!-- Pricing List Style 1 -->
                    </div>
                    <!--/ Pricing List -->

                    <!-- Message Field -->
                    <div class="section-demo">
                        <h2 id="message-field">Message Field</h2>

                        <div class="description">
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <!-- post comments -->
                                <div class="comment-list clearfix" id="comments">
                                    <ol>
                                        <li class="comment">

                                            <div class="comment-top"><span></span></div>
                                            <div class="comment-body">
                                                <div class="comment-avatar">
                                                    <div class="avatar"><img src="../sweet-candy-css/images/temp/avatar2.png" alt="" /></div>
                                                </div>
                                                <div class="comment-text">
                                                    <div class="comment-author clearfix">
                                                        <a href="#" class="link-author">Brad Pit</a> <span class="comment-date">June 28, 2012</span> | <a href="#addcomments" class="link-reply anchor">Reply</a>
                                                    </div>
                                                    <div class="comment-entry">
                                                        William Bradley "Brad" Pitt is an American actor and film producer. Pitt has received four Academy Award nominations and five Golden Globe Award nominations.William Bradley "Brad" Pitt is an American actor and film producer. Pitt has received four
                                                    </div>
                                                </div>
                                                <div class="clear"></div>
                                            </div>

                                            <!-- comment reply -->
                                            <ul class="children">
                                                <li class="comment">
                                                    <div class="comment-top"><span></span></div>
                                                    <div class="comment-body">
                                                        <div class="comment-arrow"></div>
                                                        <div class="comment-avatar">
                                                            <div class="avatar"><img src="../sweet-candy-css/images/temp/avatar3.png" alt="" /></div>
                                                        </div>
                                                        <div class="comment-text">
                                                            <div class="comment-author clearfix">
                                                                <span class="link-author">Elijah Wood</span>
                                                            </div>
                                                            <div class="comment-entry">
                                                                Elijah Wood is an American actor best known for portraying Frodo.
                                                            </div>
                                                        </div>
                                                        <div class="clear"></div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <!--/ comment reply -->

                                        </li>
                                    </ol>
                                </div>
                                <!--/ post comments -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="comment-list clearfix" id="comments">
    &lt;ol>
        &lt;li class="comment">

            &lt;div class="comment-top">&lt;span>&lt;/span>&lt;/div>
            &lt;div class="comment-body">
                &lt;div class="comment-avatar">
                    &lt;div class="avatar">&lt;img src="images/temp/avatar2.png" alt="" />&lt;/div>
                &lt;/div>
                &lt;div class="comment-text">
                    &lt;div class="comment-author clearfix">
                        &lt;a href="#" class="link-author">Brad Pit&lt;/a> &lt;span class="comment-date">June 28, 2012&lt;/span> | &lt;a href="#addcomments" class="link-reply anchor">Reply&lt;/a>
                    &lt;/div>
                    &lt;div class="comment-entry">
                        William Bradley "Brad" Pitt is an American actor and film producer. Pitt has received four Academy Award nominations and five Golden Globe Award nominations.William Bradley "Brad" Pitt is an American actor and film producer. Pitt has received
                    &lt;/div>
                &lt;/div>
                &lt;div class="clear">&lt;/div>
            &lt;/div>

            &lt;!-- comment reply -->
            &lt;ul class="children">
                &lt;li class="comment">
                    &lt;div class="comment-top">&lt;span>&lt;/span>&lt;/div>
                    &lt;div class="comment-body">
                        &lt;div class="comment-arrow">&lt;/div>
                        &lt;div class="comment-avatar">
                            &lt;div class="avatar">&lt;img src="images/temp/avatar3.png" alt="" />&lt;/div>
                        &lt;/div>
                        &lt;div class="comment-text">
                            &lt;div class="comment-author clearfix">
                                &lt;span class="link-author">Elijah Wood&lt;/span>
                            &lt;/div>
                            &lt;div class="comment-entry">
                                Elijah Wood is an American actor best known for portraying Frodo.
                            &lt;/div>
                        &lt;/div>
                        &lt;div class="clear">&lt;/div>
                    &lt;/div>
                &lt;/li>
            &lt;/ul>
            &lt;!--/ comment reply -->

        &lt;/li>
    &lt;/ol>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Message Field -->

                    <!-- Video Player -->
                    <div class="section-demo">
                        <h2 id="video-player">Video Player</h2>

                        <div class="description">
                            <p>Use Video.js player to play video content.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Video Player require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;link href="css/video-js.css" rel="stylesheet">
&lt;script src="js/video.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-video">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Video Player -->
                                        <div class="video_player">
                                            <div class="video-top"></div>
                                            <div class="inner">
                                                <video id="my_video_1" class="video-js vjs-default-skin" controls loop
                                                       preload="auto" width="434" height="182" poster="../sweet-candy-css/images/temp/horse.png"
                                                       data-setup="{}">
                                                    <source src="http://test.themefuse.com/artiom/galapagos.mp4" type='video/mp4'>
                                                </video>
                                            </div>
                                        </div>
                                        <!--/ Video Player -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="video_player">
    &lt;div class="video-top">&lt;/div>
    &lt;div class="inner">
        &lt;video id="my_video_1" class="video-js vjs-default-skin" controls loop
               preload="auto" width="434" height="182" poster="images/temp/horse.png"
               data-setup="{}">
            &lt;source src="http://path-to-video/video.mp4" type='video/mp4'>
        &lt;/video>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Video Player -->

                    <!-- Audio Player -->
                    <div class="section-demo">
                        <h2 id="audio-player">Audio Player</h2>

                        <div class="description">
                            <p>Use jPlayer to play audio content. Three different player styles available.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Audio Player require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;link href="css/jplayer.css" rel="stylesheet">
&lt;script src="js/jquery.jplayer.min.js">&lt;/script>
&lt;script src="js/jplayer.playlist.min.js">&lt;/script>
                                </pre>
                            </div>
                        </div>

                        <!--/ Audio Player Large -->
                        <div class="description">
                            <h3 id="audio-player-def">Large Audio Player</h3>
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Widget Audio Player Style 1 -->
                                        <div class="widget-container widget-audio omega">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                                                <div id="jp_container_1" class="jp-audio">
                                                    <div class="jp-type-playlist">
                                                        <div class="jp-gui jp-interface">
                                                            <div class="divide"></div>
                                                            <div class="song_title"></div>
                                                            <ul class="jp-controls">
                                                                <li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li>
                                                                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                                <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                                                                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                                                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                                                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                                            </ul>
                                                            <div class="jp-progress">
                                                                <div class="jp-seek-bar">
                                                                    <div class="jp-play-bar"></div>

                                                                </div>
                                                            </div>
                                                            <div class="jp-volume-bar">
                                                                <div class="jp-volume-bar-value"></div>
                                                            </div>
                                                            <div class="jp-current-time"></div>
                                                            <div class="jp-duration"></div>
                                                            <ul class="jp-toggles">
                                                                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                                                                <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                                                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-playlist">
                                                            <ul>
                                                                <li></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-no-solution">
                                                            <span>Update Required</span>
                                                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Widget Audio Player Style 1 -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-audio omega">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div id="jquery_jplayer_1" class="jp-jplayer">&lt;/div>
        &lt;div id="jp_container_1" class="jp-audio">
            &lt;div class="jp-type-playlist">
                &lt;div class="jp-gui jp-interface">
                    &lt;div class="divide">&lt;/div>
                    &lt;div class="song_title">&lt;/div>
                    &lt;ul class="jp-controls">
                        &lt;li>&lt;a href="javascript:;" class="jp-previous disabled" tabindex="1">previous&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-play" tabindex="1">play&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-pause" tabindex="1">pause&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-next" tabindex="1">next&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-stop" tabindex="1">stop&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume&lt;/a>&lt;/li>
                    &lt;/ul>
                    &lt;div class="jp-progress">
                        &lt;div class="jp-seek-bar">
                            &lt;div class="jp-play-bar">&lt;/div>

                        &lt;/div>
                    &lt;/div>
                    &lt;div class="jp-volume-bar">
                        &lt;div class="jp-volume-bar-value">&lt;/div>
                    &lt;/div>
                    &lt;div class="jp-current-time">&lt;/div>
                    &lt;div class="jp-duration">&lt;/div>
                    &lt;ul class="jp-toggles">
                        &lt;li>&lt;a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-playlist">
                    &lt;ul>
                        &lt;li>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-no-solution">
                    &lt;span>Update Required&lt;/span>
                    &lt;a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin&lt;/a>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Audio Player via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    //&lt;![CDATA[
    $(document).ready(function(){
        var $ = jQuery;
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"&lt;img src='images/temp/music-player1.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Only Girl&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
            },
            {
                title:"&lt;img src='images/temp/music-player2.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Only&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
            },
            {
                title:"&lt;img src='images/temp/music-player3.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Girl&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
&lt;/script>
                                </pre>
                            </div>
                        </div>
                        <!--/ Audio Player Large -->

                        <!--/ Audio Player Small -->
                        <div class="description">
                            <h3 id="audio-player-alt">Small Audio Player</h3>
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Widget Audio Player Style 2 -->
                                        <div class="widget-container widget-audio style2">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div id="jquery_jplayer_2" class="jp-jplayer"></div>
                                                <div id="jp_container_2" class="jp-audio">
                                                    <div class="jp-type-playlist">
                                                        <div class="jp-gui jp-interface">
                                                            <div class="divide"></div>
                                                            <div class="song_title"></div>
                                                            <ul class="jp-controls">
                                                                <li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li>
                                                                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                                <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                                                                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                                                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                                                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                                            </ul>
                                                            <div class="jp-progress">
                                                                <div class="jp-seek-bar">
                                                                    <div class="jp-play-bar"></div>

                                                                </div>
                                                            </div>
                                                            <div class="jp-volume-bar">
                                                                <div class="jp-volume-bar-value"></div>
                                                            </div>
                                                            <div class="jp-current-time"></div>
                                                            <div class="jp-duration"></div>
                                                            <ul class="jp-toggles">
                                                                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                                                                <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                                                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-playlist">
                                                            <ul>
                                                                <li></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-no-solution">
                                                            <span>Update Required</span>
                                                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Widget Audio Player Style 2 -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-audio style2">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div id="jquery_jplayer_2" class="jp-jplayer">&lt;/div>
        &lt;div id="jp_container_2" class="jp-audio">
            &lt;div class="jp-type-playlist">
                &lt;div class="jp-gui jp-interface">
                    &lt;div class="divide">&lt;/div>
                    &lt;div class="song_title">&lt;/div>
                    &lt;ul class="jp-controls">
                        &lt;li>&lt;a href="javascript:;" class="jp-previous disabled" tabindex="1">previous&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-play" tabindex="1">play&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-pause" tabindex="1">pause&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-next" tabindex="1">next&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-stop" tabindex="1">stop&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume&lt;/a>&lt;/li>
                    &lt;/ul>
                    &lt;div class="jp-progress">
                        &lt;div class="jp-seek-bar">
                            &lt;div class="jp-play-bar">&lt;/div>

                        &lt;/div>
                    &lt;/div>
                    &lt;div class="jp-volume-bar">
                        &lt;div class="jp-volume-bar-value">&lt;/div>
                    &lt;/div>
                    &lt;div class="jp-current-time">&lt;/div>
                    &lt;div class="jp-duration">&lt;/div>
                    &lt;ul class="jp-toggles">
                        &lt;li>&lt;a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-playlist">
                    &lt;ul>
                        &lt;li>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-no-solution">
                    &lt;span>Update Required&lt;/span>
                    &lt;a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin&lt;/a>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Audio Player via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    //&lt;![CDATA[
    $(document).ready(function(){
        var $ = jQuery;
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_2",
            cssSelectorAncestor: "#jp_container_2"
        }, [
            {
                title:"&lt;img src='images/temp/music-player1.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Only Girl&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
            },
            {
                title:"&lt;img src='images/temp/music-player2.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Only&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
            },
            {
                title:"&lt;img src='images/temp/music-player3.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Girl&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
&lt;/script>
                                </pre>
                            </div>
                        </div>
                        <!--/ Audio Player Small -->

                        <!--/ Audio Player Playlist -->
                        <div class="description">
                            <h3 id="audio-player-playlist">Audio Player with Playlist</h3>
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Widget Audio Player Style 3 -->
                                        <div class="widget-container widget-audio style3 omega">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div id="jquery_jplayer_3" class="jp-jplayer"></div>
                                                <div id="jp_container_3" class="jp-audio">
                                                    <div class="jp-type-playlist">
                                                        <div class="jp-gui jp-interface">
                                                            <div class="divide"></div>
                                                            <div class="song_title" title="Toggle Playlist"></div>
                                                            <ul class="jp-controls">
                                                                <li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li>
                                                                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                                <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                                                                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                                                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                                                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                                            </ul>
                                                            <div class="jp-progress">
                                                                <div class="jp-seek-bar">
                                                                    <div class="jp-play-bar"></div>

                                                                </div>
                                                            </div>
                                                            <div class="jp-volume-bar">
                                                                <div class="jp-volume-bar-value"></div>
                                                            </div>
                                                            <div class="jp-current-time"></div>
                                                            <div class="jp-duration"></div>
                                                            <ul class="jp-toggles">
                                                                <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                                                                <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                                                <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                                <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-playlist">
                                                            <ul>
                                                                <li></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-no-solution">
                                                            <span>Update Required</span>
                                                            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Widget Audio Player Style 3 -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-audio style3 omega">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div id="jquery_jplayer_3" class="jp-jplayer">&lt;/div>
        &lt;div id="jp_container_3" class="jp-audio">
            &lt;div class="jp-type-playlist">
                &lt;div class="jp-gui jp-interface">
                    &lt;div class="divide">&lt;/div>
                    &lt;div class="song_title" title="Toggle Playlist">&lt;/div>
                    &lt;ul class="jp-controls">
                        &lt;li>&lt;a href="javascript:;" class="jp-previous disabled" tabindex="1">previous&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-play" tabindex="1">play&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-pause" tabindex="1">pause&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-next" tabindex="1">next&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-stop" tabindex="1">stop&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume&lt;/a>&lt;/li>
                    &lt;/ul>
                    &lt;div class="jp-progress">
                        &lt;div class="jp-seek-bar">
                            &lt;div class="jp-play-bar">&lt;/div>

                        &lt;/div>
                    &lt;/div>
                    &lt;div class="jp-volume-bar">
                        &lt;div class="jp-volume-bar-value">&lt;/div>
                    &lt;/div>
                    &lt;div class="jp-current-time">&lt;/div>
                    &lt;div class="jp-duration">&lt;/div>
                    &lt;ul class="jp-toggles">
                        &lt;li>&lt;a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-playlist">
                    &lt;ul>
                        &lt;li>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-no-solution">
                    &lt;span>Update Required&lt;/span>
                    &lt;a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin&lt;/a>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Audio Player via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    //&lt;![CDATA[
    $(document).ready(function(){
        var $ = jQuery;
        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_3",
            cssSelectorAncestor: "#jp_container_3"
        }, [
            {
                title:"&lt;img src='images/temp/music-player1.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Only Girl&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-03-Lentement.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-03-Lentement.ogg"
            },
            {
                title:"&lt;img src='images/temp/music-player2.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Only&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
            },
            {
                title:"&lt;img src='images/temp/music-player3.png' />&lt;span>&lt;strong>Rihanna -&lt;/strong> Girl&lt;/span>",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
&lt;/script>
                                </pre>
                            </div>
                        </div>
                        <!--/ Audio Player Playlist -->
                    </div>
                    <!--/ Audio Player -->

                    <!-- Sliders -->
                    <div class="section-demo">
                        <h2 id="sliders">Sliders</h2>

                        <!-- Image Slider -->
                        <div class="description">
                            <h3 id="sliders-image">Image Slider</h3>
                            <p>This slideshow is based on Bootstrap's <code>carousel.js</code></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-5 col-md-offset-3">
                                        <!-- Image Slider -->
                                        <div class="widget-container widget_gallery">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div id="myCarousel" class="carousel slide" data-interval="20000">
                                                    <!-- Carousel items -->
                                                    <div class="carousel-inner">
                                                        <div class="active item">
                                                            <img src="../sweet-candy-css/images/temp/post_img18.jpg" alt="" />
                                                            <div class="carousel-title"><h6>Brave</h6><p>Change your fate</p></div>
                                                        </div>
                                                        <div class="item">
                                                            <img src="../sweet-candy-css/images/temp/post_img3.jpg" alt="" />
                                                            <div class="carousel-title"><h6>Horton</h6><p>Change your fate</p></div>
                                                        </div>
                                                        <div class="item">
                                                            <img src="../sweet-candy-css/images/temp/post_img8.jpg" alt="" />
                                                            <div class="carousel-title"><h6>Surf up</h6><p>Change your fate</p></div>
                                                        </div>
                                                        <div class="item">
                                                            <img src="../sweet-candy-css/images/temp/post_img15.jpg" alt="" />
                                                            <div class="carousel-title"><h6>Wall-e</h6><p>Change your fate</p></div>
                                                        </div>
                                                        <div class="item">
                                                            <img src="../sweet-candy-css/images/temp/post_img17.jpg" alt="" />
                                                            <div class="carousel-title"><h6>Ice Age</h6><p>Change your fate</p></div>
                                                        </div>
                                                    </div>
                                                    <!-- Carousel indicators -->
                                                    <ol class="carousel-indicators">
                                                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                                        <li data-target="#myCarousel" data-slide-to="1"></li>
                                                        <li data-target="#myCarousel" data-slide-to="2"></li>
                                                        <li data-target="#myCarousel" data-slide-to="3"></li>
                                                        <li data-target="#myCarousel" data-slide-to="4"></li>
                                                    </ol>
                                                    <!-- Carousel nav -->
                                                    <a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
                                                    <a class="carousel-control right" href="#myCarousel" data-slide="next"></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ Image Slider -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                    <pre class="prettyprint">
&lt;div class="widget-container widget_gallery">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div id="myCarousel" class="carousel slide" data-interval="20000">
            &lt;!-- Carousel items -->
            &lt;div class="carousel-inner">
                
                &lt;div class="active item">
                    &lt;img src="images/temp/post_img18.jpg" alt="" />
                    &lt;div class="carousel-title">&lt;h6>Brave&lt;/h6>&lt;p>Change your fate&lt;/p>&lt;/div>
                &lt;/div>
                
                &lt;div class="item">
                    &lt;img src="images/temp/post_img3.jpg" alt="" />
                    &lt;div class="carousel-title">&lt;h6>Horton&lt;/h6>&lt;p>Change your fate&lt;/p>&lt;/div>
                &lt;/div>
                ...
                ...
                ...
            &lt;/div>
            &lt;!-- Carousel indicators -->
            &lt;ol class="carousel-indicators">
                &lt;li data-target="#myCarousel" data-slide-to="0" class="active">&lt;/li>
                &lt;li data-target="#myCarousel" data-slide-to="1">&lt;/li>
                ...
                ...
                ...
            &lt;/ol>
            &lt;!-- Carousel nav -->
            &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev">&lt;/a>
            &lt;a class="carousel-control right" href="#myCarousel" data-slide="next">&lt;/a>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                    </pre>
                            </div>
                        </div>
                        <!--/ Image Slider -->
                    </div>
                    <!--/ Sliders -->

                    <!-- Calendar -->
                    <div class="section-demo">
                        <h2 id="widget-calendar">Calendar</h2>

                        <div class="description">
                            <p>Calendar allow users to select multiple dates.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Calendar require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/libs/jquery-ui.min.js">&lt;/script>
&lt;script src="js/jquery-ui.multidatespicker.js">&lt;/script>
&lt;link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet">
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- widget calendar-->
                                        <div class="widget-container widget_calendar">
                                            <div class="inner">
                                                <input type="text" name="date_departure" class="inputField" value="" id="date_departure">
                                                <script>
                                                    // <![CDATA[
                                                    jQuery(document).ready(function($) {
                                                        var daysRange = 5;

                                                        function assignCalendar(id){
                                                            $('<div class="calendar" />')
                                                                    .insertAfter( $(id) )
                                                                    .multiDatesPicker({
                                                                        dateFormat: 'yy-mm-dd',
                                                                        minDate: new Date(),
                                                                        maxDate: '+1y',
                                                                        altField: id,
                                                                        firstDay: 1,
                                                                        showOtherMonths: true
                                                                    }).prev().hide();
                                                        }

                                                        assignCalendar('#date_departure');
                                                    });
                                                    // ]]>
                                                </script>
                                            </div>
                                        </div>
                                        <!--/ widget calendar-->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget_calendar">
    &lt;div class="inner">
        &lt;input type="text" name="date_departure" class="inputField" id="date_departure">
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Calendar via JS:</div>

                                <pre class="prettyprint">
&lt;script>
    // &lt;![CDATA[
    jQuery(document).ready(function($) {
        var daysRange = 5;

        function assignCalendar(id){
            $('&lt;div class="calendar" />')
                    .insertAfter( $(id) )
                    .multiDatesPicker({
                        dateFormat: 'yy-mm-dd',
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        firstDay: 1,
                        showOtherMonths: true
                    }).prev().hide();
        }

        assignCalendar('#date_departure');
    });
    // ]]>
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Calendar -->

                    <!-- User Profile -->
                    <div class="section-demo">
                        <div class="description">
                            <h2 id="user-profile">User Profile</h2>
                            <p>Display information about user in a styled box.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-6">
                                        <!-- Avatar Placeholder -->
                                        <div class="widget-container widget_avatar">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div class="avatar"><img src="../sweet-candy-css/images/temp/avatar.png" alt="" /></div>
                                                <h5>Jim Carrey</h5>
                                                <span class="subtitle">Comedian actor</span>
                                                <div class="followers">
                                                    <div class="counter">895</div>
                                                    <span>Followers</span>
                                                </div>
                                                <div class="follow">
                                                    <div class="plus"></div>
                                                    <a href="#" class="btn btn-blue btn-right"><span>Follow</span></a>
                                                </div>
                                                <div class="clear"></div>
                                                <div class="bottom"></div>
                                            </div>
                                        </div>
                                        <!--/ Avatar Placeholder -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget_avatar">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div class="avatar">&lt;img src="images/temp/avatar.png" alt="" />&lt;/div>
        &lt;h5>Jim Carrey&lt;/h5>
        &lt;span class="subtitle">Comedian actor&lt;/span>
        &lt;div class="followers">
            &lt;div class="counter">895&lt;/div>
            &lt;span>Followers&lt;/span>
        &lt;/div>
        &lt;div class="follow">
            &lt;div class="plus">&lt;/div>
            &lt;a href="#" class="btn btn-blue btn-right">&lt;span>Follow&lt;/span>&lt;/a>
        &lt;/div>
        &lt;div class="clear">&lt;/div>
        &lt;div class="bottom">&lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ User Profile -->

                    <!-- Simple Graph -->
                    <div class="section-demo">
                        <h2 id="flot-graph">Simple Graph</h2>

                        <div class="description">
                            <p>Build graphs with Flot - attractive JavaScript plotting for jQuery.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Flot require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;!--[if lte IE 8]>
    &lt;script type="text/javascript" src="js/excanvas.min.js">&lt;/script>
&lt;![endif]-->
&lt;script type="text/javascript" src="js/jquery.flot.js">&lt;/script>
&lt;script type="text/javascript" src="js/jquery.flot.resize.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <div class="row">
                                    <div class="col-md-4">
                                        <!-- Simple Graph -->
                                        <div class="widget-container widget_graph">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div id="graph" class="graph"></div>
                                                <div class="bottom"></div>
                                            </div>
                                        </div>
                                        <!--/ Simple Graph -->
                                    </div>

                                    <div class="col-md-4">
                                        <!-- Simple Graph without Background -->
                                        <div class="widget-container widget_graph no-bg">
                                            <div class="header-top"><span></span></div>
                                            <div class="inner">
                                                <div id="graph2" class="graph"></div>
                                                <div class="bottom"></div>
                                            </div>
                                        </div>
                                        <!--/ Simple Graph without Background -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;!-- Simple Graph Boxed -->
&lt;div class="widget-container widget_graph">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div id="graph" class="graph">&lt;/div>
        &lt;div class="bottom">&lt;/div>
    &lt;/div>
&lt;/div>

&lt;!-- Simple Graph -->
&lt;div class="widget-container widget_graph no-bg">
    &lt;div class="header-top">&lt;span>&lt;/span>&lt;/div>
    &lt;div class="inner">
        &lt;div id="graph2" class="graph">&lt;/div>
        &lt;div class="bottom">&lt;/div>
    &lt;/div>
&lt;/div>                                    
                                </pre>

                                <div class="fire-js">Enable Graph via JS:</div>

                                <pre class="prettyprint">
&lt;!-- Simple Graph Boxed -->
&lt;script type="text/javascript">
    $(function() {
        var d1 = [[0, 9], [1, 23], [1.8, 7], [2.2, 24], [2.8, 18], [4, 36]];
        var graphholder = $("#graph");
        var plot = $.plot(graphholder, [d1], {
            colors: ["#68aec2", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(50,196,245,0.2)"
                },
                points: {
                    show: true,
                    radius: 5,
                    lineWidth: 1,
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                backgroundColor: null,
                color: "#BBB",
                borderColor: "#d3d3d3"
            },
            shadowSize: 0
        });

        function showTooltip(x, y, contents) {
            $("&lt;div id='graph-tooltip' class='graph-tooltip'>" + contents + "&lt;/div>").css({top: y - 42, left: x - 20}).appendTo("body").fadeIn(200);
        };

        var previousPoint = null;
        $("#graph").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    $("#graph-tooltip").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, '$ ' + y*100);
                }
            } else {
                $("#graph-tooltip").remove();
                previousPoint = null;
            }
        });
    });
&lt;/script>

&lt;!-- Simple Graph -->
&lt;script type="text/javascript">
    $(function() {
        var d1 = [[0, 9], [1, 18], [1.8, 7], [2.2, 24], [2.8, 17], [4, 36]];
        var graphholder = $("#graph2");
        var plot = $.plot(graphholder, [d1], {
            colors: ["#ffc70a", "#afd8f8", "#cb4b4b", "#4da74d", "#9440ed"],
            series: {
                lines: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "rgba(247,176,10,0.2)"
                },
                points: {
                    show: true,
                    radius: 5,
                    lineWidth: 1,
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                margin: 12,
                backgroundColor: "#fbfbfb",
                color: "#d3ccbd",
                borderColor: "#d3d3d3"
            },
            shadowSize: 0
        });

        function showTooltip(x, y, contents) {
            $("&lt;div id='graph-tooltip2' class='graph-tooltip'>" + contents + "&lt;/div>").css({top: y - 45, left: x - 20}).appendTo("body").fadeIn(200);
        };

        var previousPoint = null;
        $("#graph2").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {

                    previousPoint = item.dataIndex;

                    $("#graph-tooltip2").remove();
                    var x = item.datapoint[0].toFixed(2),
                            y = item.datapoint[1].toFixed(2);

                    showTooltip(item.pageX, item.pageY, '$ ' + y*100);
                }
            } else {
                $("#graph-tooltip2").remove();
                previousPoint = null;
            }
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Simple Graph -->

                </div>
                <!--/ content -->
            </div>
        </div>
        <!--/ row-->
    </div>
    <!--/ container -->

</div>
</body>
</html>